February 7, 2008

Simple steps to using the Google Maps API

I really like maps, and no one does maps better than the Google Maps API. Today I’ll go over a few simple steps to getting started with the Google Maps API.

Step 1

Get yourself a Google Maps API key. To start off you need to sign up with Google for a unique key to use their API and so they can keep track of your geocoding requests (which are limited). Geocoding is the translation of street addresses into latitude and longitude coordinates. Google provides a limited geocoding service built in (which is probably enough for most projects), and there are other alternatives you can use to do more extensive geocoding if necessary.

Step 2

Pull in the API source. Using standard script tags you include the Google
API source using your key.

1
2

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=your_key_here"
type="text/javascript"></script>

Step 3

Create a map instance. The great thing about using the Google Maps API is that it really is quite simple to get started. Just put a bit of javascript together to display a map and center it on a particular point.

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
 
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
</script>

Then just put the initialize function into the body tag of your html as an onload event, and the div with the id of “map_canvas” will display your map.

1
2
3

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>

Step 4

Use Google reference materials. This little introduction doesn’t go over many of the advanced things you can do with the Google Maps API. Use the examples and the reference documentation to go over how to apply map points, do animations, draw polygons and tooltips, and many other features.

Leave a comment