How to Annotate Google Maps

There are a few ways and tools that alow to build and annotate google maps. For those of you interested in learning how to do it yourself, we’re going to do a quick walkthrough to get you started, and show you some examples.

The first thing you’re going to need to do is go to Google Maps and sign up for a Google Maps developer API. The important thing to note is you will get a domain specific key. Either you will need two keys one for your development server and one for your live server, or develop on your live server (annoying but work-aroundable). Once that’s in place we’re going to need to decide where we are going to map. I’m going to use Chicago where we recently went on vacation. I set up a html file with a gray space that reads loading for people on slow connection with the following code:


<div id="map" style="border: 1px solid #979797; background-color: #e5e3df; width: 400px; height: 600px; margin: auto; margin-top: 2em; margin-bottom: 2em">
<div style="padding: 1em; color: gray">Loading...</div>
</div>


You can see the file here.

Next we’re going to need to add in the code that calls the map up and tells it where to center. First we add the script that activates the map with our developer key.

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

followed by the code that adds the controls and tells the map where to center:


<script type="text/javascript">
//< ![CDATA[

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.877617,-87.617168), 14);

}

//]]>
</script>

Finding the longitude and lattitude is tricky. If you do a search on Google maps for an address, then click the link to this page button on the right you can get what you need. For example this is a link to the [palmer house hilton] in Google maps. If you look at the URL you’ll see this parameter

&ll=41.88164,-87.627211

Thats what you need. You may need to make some minor adjustments (see code above) to center the map how you want it, but you should end up with something link this.

Now we’re going to add the javascript code for the marker inside of the existing javascript. Here’s what we need to add:

var point = new GLatLng( 41.880617,-87.627168);
var marker = createMarker(point,'<a href="http://www.hilton.com/en/hi/hotels/photo_gallery.jhtml?ctyhocn=CHIPHHH">Palmer House Hilton</a><br> 17 E Monroe St<br>Chicago, IL 60603<br><a href="http://www.flickr.com/photos/66568072@N00/sets/72057594132502012/">My Flickr Photos</a>.')
map.addOverlay(marker);

First we are giving the longitude and latitude coordinates for the marker. The we give the marker some information. We can pass links and even images into the information window. Then we need to add a “listner” for people who click the marker, again put this piece of code inside of the existing javascript:

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}


Now when someone clicks the marker an information window pops up with the data and links we added. Your file should look like this.

Adding more markers is simple, just copy the marker code from above, change the coordinates and data and add it into the script. For example here’s another marker this time with a photo:

var point = new GLatLng( 41.882854,-87.620344);
var marker = createMarker(point,'<a href="http://www.millenniumpark.org/">Millennium Park</a><br><a href="http://www.flickr.com/photos/66568072@N00/sets/72057594132524716/">My Flickr Photos</a><br /><br /><a href="http://www.flickr.com/photos/66568072@N00/144938680/in/set-72057594132524716/" border="0"><img src="http://static.flickr.com/55/144938680_2c2aba9a3c.jpg?v=0" width="100"></a>.')
map.addOverlay(marker);

Here’s a link to the final file.In this case I added a link to the park website, a link to flickr photos, and an image from my flickr photoset. However the links could go anywhere, another webpage, a reservation or order page, a video page, or lead generation or contact page, it’s really up to you. Next we’ll take a look at How to drive traffic with Flickr Photos.

Popularity: 16% [?]

Sphere: Related Content

2 Responses to “How to Annotate Google Maps”

1. Annotated Google Chicago Vacation Map : Says:
   May 16th, 2006 at 8:40 am

   [...] Web 2.0 Since I took some pictures I decided I’d do a mashup annotated google map just so it’s part of my skill set. Actually figuring out how to annotate a google map was pretty difficult. The Google Map API, give me a severe case of MEGO (thanks Matt). Hey Google Maps if you want people to use it more you might think about creating an ‘annotating google maps for dummies’ type post instead of something in programming-speak. The SERP’s for [annotated google maps] is useless because it’s dominated by an outdated no longer functional engadget post (too much authority weight, I’ve been saying that quite a while now) and other people linking to engadget. Engadget does say it’s broken and point to some other spots but they are mostly tools and not helpful to teach you how to do it. So I slogged through some deep level SERP’s, did some research, and came up with my own How to Annotate Google Maps post. document.write(”Add to Del.icio.us”) | Add to Y! MyWeb | Digg it | Add to Slashdot Related PostsNo Travel Tips on MSNMid Vacation LessonThe Cost of Staying Constantly ConnectedMalcom Gladwell, Mavens, Connectors, and DiggInternet Based TV Network [...]

2. Cape Cod Says:
   May 17th, 2006 at 11:57 am

   The best GMaps tutorials I have seen are here.

   The Yahoo Maps API is also cool. They have a local search API and a geocoding API for getting lat/long for known street addresses. Also Y! supports AJAX (JSON). A good Yahoo tutorial is a href=”http://www.theurer.cc/blog/2005/11/03/how-to-build-a-maps-mash-up/”>here.

   I built a Gmap for getting lat/long coords for any location without knowing the street address.

   There is also a way to get topo maps integrated into the Gmaps API as well. I wish I bookmarked the site I saw it on, can’t seem to find it now.