Google Maps API v2 Explained
By: Bryan Hunsinger

Most people really like the look and usability of the embedded Google Maps, but don't know how easy it is to add them to any page. Anyone can quickly have a map up and running in just a few minutes.

Follow the example below that shows how you can add a map to any contact us page or blog quickly and easily.

First, you need a (free) Google Maps API key. You can find it, along with other documentation, at http://www.google.com/apis/maps/. This page has a great wealth of information, especially if you want to extend your new map beyond this example.

Follow the instructions to "Sign up for a google API key". You'll need a gmail account, and to enter your domain name. This key can then only be used on pages served from that domain name. If you are going to develop on a different server, then you might want to get 2 keys - one for your development server, and then one to switch over to when you publish it to your site. (In my site, I have several keys that are automatically selected based on which environment the code is running in.)

Along with your key, Google will give you a bit of starter code. For the time being, ignore the google code. As of this writing, their code is for version 1 of the API, while the documentation at http://maps.google.com/apis/maps/documentation/ is for version 2. The code here will show you how to implement v2 of the api, which is better. After copying your new key, start with the following code. (note some lines that shouldn't be wrapped like they are here due to space limitations. Make sure your SCRIPT tags are all on one line.)

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script src="http://maps.google.com/maps?file=api&v=2&key=
[YOURKEY]" type="text/javascript"></script>
	</head>
<body onload="showMap();" onunload="GUnload()">
	<div id="map" style="width: 500px; height: 400px">
	<script type="text/javascript">
		//<![CDATA[
		function showMap()
		{
		if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.setCenter(new GLatLng(31.95216223802497, -7.71875), 1);
			}
		}
		//]]>
	</script>
	</div>
</body>
</html>

You'll have a different key string in the SCRIPT tag, generated by Google to match your domain name. In order to add a map to your site, all you have to do is cut and paste the right pieces of code from this example.

This script include does 2 things. First, it links in the javascript you need to run the map, and second, it let's Google know who you are with the embedded key.

Next, you will see the div. This is actually where the map will appear on the screen. Put this div wherever on your page you want the map to show up. Be sure to update the width and height styles to match how big of a map you want on the page.

Next, is the code that actually draws the map. Place this in your XHTML anywhere after the map DIV. The first line instantiates the map and assigns it to the map div. The second line adds the little pan and zoom controls. Finally, the third line centers the map on a point and sets the zoom level.

Be sure to add the onload and unload functions to the body tag- these start the map loading process, and help stop Internet Explorer from crashing, and avoid some nasty memory leaks.

Now you'll have a map, but it's pointing at the Google headquarters in Palo Alto! How do we get coordinates and point the map at where we want? Even better, how do we get one of those little Pins on the map?

No problemo . First, you need to find the latitude and longitude of the place you want on the map. We'll use Google. Go to http://maps.google.com and use the pan, zoom and search functions to find what you want to link to. Once you've found it, double click right on the spot to center the map there. Finally, click on "link to this page", and take a close look at the URL. When I look at Bordeaux (where I live), I get this url

http://maps.google.com/maps?f=q&hl=en&q=ocoee,fl&om=
1&ll=28.554634,-81.514864&spn=0.015907,0.043259

Luckily for us, it contains the latitude and longitude (see the ll=28.55... line? That is the coordinates). Now, we just have to enter those coordinates in our script to get our map centered on the same spot. Modify the map.centerAndZoom line with your new coords. Like so:

map.setCenter(new GLatLng(28.554634,-81.514864), 14;

Now your map will point at the new coordinate. Also, you can play around with the last number (13) to change the zoom level, try 14 like the example above.

Finally, we can add a point by adding one line of javascript right after the map.centerAndZoom command.

map.addOverlay(new GMarker(new GLatLng(4528.554634,-81.514864);

Notice we use the same coordinates as the map.centerAndZoom command.

Dunzo!! You have your very own, fully interactive Google map. If you want to get fancy, study the API documentation to learn about the other features already built in.

[Comment Here]

Posted: April 22, 2006