File Under: APIs, Location

Using the Google Maps API

Google Maps is perhaps the biggest and most useful of all the common web APIs. Who doesn’t love clicking and dragging those sleek, clean maps? But it’s also one of the more complex APIs, which can be intimidating for newcomers. It’s also somewhat difficult to immediately recognize all the possibilities of the Google Maps API since there are literally hundreds of ways to use it.

We’re going to dive right in. But to keep things simple, we’ll start with a very common use: Adding a map to your site and displaying some markers.


Contents

  1. Getting Started
  2. Adding in the Map
  3. Adding Markers
  4. Where to Go From Here

Getting Started

The first thing you need to do is apply for a Google Maps key. Just head over to the API key signup page and log in to your Google account. Once you have the key, create an html file with this basic code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

	<head>



		<title>My Map</title>

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

	</head>

	<body>



		<h1>My Map</h1>

		<div id="map-canvas"></div>

	</body>

</html>

Remember to paste your map key into the JavaScript tag and you’re all set. Well, almost. WE need to add one more little thing so that Google will go ahead and initialize the map. Change the body tag to include the following handlers:

<body onload="initialize()" onunload="GUnload()">


Adding in the Map

We’ve got our script set up and it’s loading, now we just need to tell the API where to draw the map. To do that we’re going to write a little JavaScript. Let’s get started by inserting this code inside the head tags of your HTML file:

<style>

div#map-canvas {

	width: 500px;

	height: 300px;

}

</style>

<script type="text/javascript">



	var map = null;



	function initialize() {

		if (GBrowserIsCompatible()) {

		  // create a center for our map

		  point = new GLatLng(37.780764,-122.395592)

		  // create a new map.

		  map = new GMap2(document.getElementById("map-canvas"));

		  // set the center

		  map.setCenter(point, 15, G_NORMAL_MAP);



		}

	}

</script>

Now load your HTML file in your browser and you should see a map centered on the Wired News offices. Did you feel that tingle of excitement? We did.


Adding Markers

Let’s add in marker so users have something to interact with. To do that we’ll extend our initialize function. Add these lines just below the map.setCenter bit:

	markerOptions = {clickable:true, draggable:false };

	marker = new GMarker(point, markerOptions);

	map.addOverlay(marker);

	marker.info_window_content = '<h2><strong>Wired News</strong></h2><p>Home of Monkeys</p>'

	marker.bindInfoWindowHtml(marker.info_window_content, {maxWidth:350});

	GEvent.addListener(marker, "click", function() {

	  map.panTo(point, 2);

	});



Reload your page in the browser and you should now see a little red pin. When you click it, you should see our little info window.

And that’s all there is to it.


Where to Go From Here

Obviously, the GMaps API is far more powerful than this simple example. By itself, the Google Maps API might not be the most exciting web service. But when you start mashing it together with other data, it can turn boring address tables into map-plotted, location-aware information for your visitors.

Here are a few ideas to get you started exploring some other Google Maps options.

  • Include driving directions – To get the handy “directions to here” links that you’ll find on a normal Google map, see the GDirections class
  • Include map controls – There are a variety of different GMap controls for your users to pan and zoom. Try adding this line just above the initialize function:
map.addControl(new GSmallZoomControl());

  • Batch Add Markers – The best way to add markers is to pull info from your database and loop through it when you output the HTML. Just nestle the code from the “Adding Markers” section inside a loop and make the marker names dynamic.
  • Custom Markers – There’s no need to stick with the default red pin. You can use any image you want. See the docs for more details.
  • Hide the Google logo and map image credits – Most definitely against the TOS, but if you’re so inclined, add this to your stylesheet:
img[src="http://maps.google.com/intl/en_us/mapfiles/poweredby.png"],

#map-canvas>div:first-child+div>*,

a[href="http://www.google.com/intl/en_us/help/terms_maps.html"]