Google maps are both fast and flexible. If you need to create a map for your company to help your customers find you, or you want to learn this technology for private reasons, you've come to the right place.
Google Maps Version 3 Tutorials
Google released version 3 of the maps API back in the Spring of 2009. They concentrated on making Version 3 of Maps faster and leaner. It is an improvement over version 2 in a few important ways:
- No API key is required
- It is faster and now works better on mobile devices
No More Version 2
If you've used X2tutorials.com to learn how to create your own maps in the past, then you'll see the examples looking a bit 'different', but have no fear. The new stuff will all be explained in the tutorial. If for any reason you need information about version 2 again, let us know.
Map setup in version 3
A new thing to get used to is that you need to set the properties of the map in a more object-oriented way than before. You need to place some information in a structure called the "MapOptions" object.
Most of the values can be set to true or false, but others such as the "zoom" needs to be set to an integer.
Following is a list of the properties required for our purposes in the maps tutorial, and note that all properties that are absolutely needed to create a map are marked REQUIRED.
| Property Name | Data Type | How to Use |
|---|---|---|
| center | LatLng |
REQUIRED: You need to let the maps engine know where in the world you want your map to represent. You do
this by setting the center point of the map.
All you have to do is create a new "LatLng" object then place it in the MapOptions object, like this:
var LatLong = new google.maps.LatLng(some latitude, some longitude); |
| mapTypeControl | boolean (true or false) | Set this to "true" if you want your map user to be able to switch from a street map to a satellite map, etc; |
| mapTypeId | MapTypeId object |
REQUIRED: mapTypeId is used when creating your map. This informs the map engine as to what kind of map to draw.
The possible values are:
This values must be set using the form: |
| zoom | a number (integer) | REQUIRED: Enter between 0 and 21, where 0 is the whole world. FYI: Most of the examples used in the tutorials use a zoom level of 12. |
A sample MapOptions object
Here is how a MapOptions object looks that is filled out:
var myOptions = {
zoom: 12,
center: latlng,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}