If you want to get started with Google Maps then you have to use an Ajax Javascript control, which is a really good example of the Spartan approach to creating web pages, or you can use the a Flash implementation.

This article is about using the Spartan Ajax Google Maps control. If you have implemented a Google Maps application in the past it is also important to know that the current version 3.0 of the API replaces the earlier versions and you need to up-grade your applications.

You can find out more at:

http://code.google.com/apis/maps/documentation/javascript/

Beginners are often confused by the array of choices they have in using Google's map offerings. The basic Google Maps service provides 2D maps and satellite image:

http://maps.google.com/

Google Earth is an add-in and application that allows you to view the satellite imagery in 3D. Google Earth is fun but it involves installing a download and this can put users off and it is overkill for many web and mobile applications.

As well as Google Maps there are a range of other services such as geolocation - the converting of an address to a location - that you can use but these are all best examined after you have discovered how easy the core Google Maps API is to use.

Getting started

You don't need to download anything to get started but you do need a web development environment. If you already have a web site and the necessary tools you can just use them. If not then I can recommend Aptana Studio as a good free starting point but you can use Microsoft's Web Developer Express or Eclipse or even just a simple text editor to create the HTML and Javascript.

A welcome change to the way Google Maps is used is that you no longer have to sign up and use a key to access the service. You can simply start using it and this is much simpler.

Your first map-enabled web page

If you are using an IDE start a new Empty Web site and add an HTML page called Map.

The whole principle of using the Map control is that you load a Javascript library which you then use to create and manipulate the Map control. Every page that uses the Map control has to load:

<script type="text/javascript" 
 src="http://maps.google.com/maps/api/js?
   sensor=false"/> 

The sensor parameter indicates whether or not the device has a location sensor. If you are targeting mobile devices this could well be true but for most web pages we can assume that there is no GPS sensor.

Now that we have the Map control script we can start to make use of it.

The map control has a single constructor google.maps(). This accepts a single parameter which specifies the DOM object that will be used to display the map. That is, everything that the Map control creates is added to the DOM as children of the specified object.

In most cases the DOM object used is a Div but this isn't essential. The Map control is also usually created as a global object so that all of the script can access it.

Thus most Google Maps applications start off in the same way. First we have to initialise a LatLng object that specifies will be used to specify the location of the center of the map:

<script type="text/javascript"> 
 function GetMap() {
 var latlng = new google.maps.LatLng(
                       -34.397, 150.644);

Next we set up an Options object that specifies how the map will be displayed:

var myOptions = { 
 zoom: 8, 
 center: latlng, 
 mapTypeId: google.maps.MapTypeId.ROADMAP 
 };

Notice that this specifies the zoom, center of map and type of map - in this case a road map. 

Now we are ready to create the all important map object:

 map = new google.maps.Map(
  document.getElementById("mapContainer"),
     myOptions);
}

This creates a  variable "map" as a global variable and when GetMap is executed this is set to an instance of the Google Map object. The object used to render the map set to "mapContainer".

In general you have to load a map before you can do anything more with the control.

All that is needed to complete the page is a Div with the correct ID and something to call the GetMap function and make everything happen:

<body onload="GetMap()">
 <div id="mapContainer" 
  style="width:500px;height:500px">
 </div>
</body>

If you load this page via a web server then you should see the map appear.

If you have any problems with running the Javascript using a server debug facility, e.g. Aptana's, then try running it without debugging and use the browser's debugger. The way that the Google script is loaded sometimes confuses debuggers.

<ASIN:0596101619>

<ASIN:1430216204>

<ASIN:0471790095>

<ASIN:0470236825>

Prev - Next >>