Building your first Google Map
Posted on March 18, 2007 | 5 Comments | No TrackBacks
Mashup seems to be the latest buzz word and Google Maps seems almost ubiquitous these days. While the challenge of using the Google Maps API may seem daunting, it's actually not nearly as difficult as you'd imagine. Having recently tackled my first one I thought I'd put together a quick step-by-step guide on how to setup the basics for anyone else who may be interested in doing the same.
Step 1 - Obtaining your Google Maps API Key
Point your browser to http://www.google.com/apis/maps/signup.html, fill out the form and get your free API key. You need this in order to make your mashup work online. Embed it into the head tag of you page like so:
<script src="http://maps.google.com/maps?file=api&v=2&key=INSERT-KEY-HERE" type="text/javascript"></script>
Step 2 - Plotting your points
For the purposes of this example I'm picking a few of my favorite restaurants in Washington, DC. While you can easily hard-code these into the Google Maps javascript, I think including them in an external XML file makes it easier to make updates so I've taken that route. My XML looks like this:
<markers>
<marker lat="" lng="" name=" " phone="" address="" city="" state="" zip="" url="" />
</markers>
Each marker on the map is represented by a node in the XML doc with attributes that will be used for the display of the map. Note that Google Maps uses latitudes and longitudes to plot markers. While there is a built in function to convert address into lat/long values (a process called geocoding), it wouldn't be efficient to call it for these static locations so I've included the geocoded values into the XML. To batch geocode a bunch of address values I recommend http://www.batchgeocode.com/
Step 3 - HTML Setup
In order for your map to show up within your site you'll need a simple div tag which will house the information from Google.
<div id="googlemap" style="width: 500px; height: 325px"></div>
You can give it whatever ID you like and adjust the width and height accordingly.
Next you'll need to initialize the map by adding some javascript to the HTML body tag like so...
<body onload="load()" onunload="GUnload()">
Step 4 - Javascript
This is where the actual magic happens. All of the settings for drawing the map and plotting the markers are handled via javascript. The following code will show you how to draw a basic map and plot the markers we defined earlier in our XML document.
That's basically all there is to it...
Google Maps Demo of this code in action
Further reading
Much of what I know was learned with a lot of help from these two sites.
The Google Maps API is incredibly complex and you can do much more more than what I've outlined here. Hopefully this post will serve as a baseline and help you get started building your own mashups.
i am super rivted by this.
I had to remove the & symbols for the XML to work. (This is the first time I've ever worked with XML). Is that usual?
Oh yeah - and this was an awesome help. Thanks for the resource.
Cheers,
Phoenix.
Characters like ampersands, quotes, and greater/less than signs are illegal inside XML nodes unless they're properly encoded or encapsulated within a CDATA element.
See http://www.w3schools.com/xml/xml_cdata.asp for more info
You don't happen to know how to make the map come up in Satellite view by default, do you?
map = new GMap2(document.getElementById("googlemap"));
map.setMapType(G_SATELLITE_MAP);
See Google Maps Documentation for more.