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.

tla starter kit

Related posts:

  1. How I Got Lost Using Google Maps and the iPhone Over the years chances are you’ve seen stories about Google...
  2. Google Onebox with Maps Gone AWOL So I was looking at something last week and I...
  3. Google Maps and Click to Call So I’ve been playing with some local/maps features and tried...
  4. Adsense and Heat Maps Thanks to Jenstar for doing whatever had to be done...
  5. Annotated Google Chicago Vacation Map Recently Mrs. GW had to go to the ACCM show...

Advertisers:

  1. Text Link Ads - New customers can get $100 in free text links.
  2. BOTW.org - Get a premier listing in the internet's oldest directory.
  3. Ezilon.com Regional Directory - Check to see if your website is listed!
  4. Need an SEO Audit for your website, look at my SEO Consulting Services
  5. Directory Journal - Get permanent deep links in a search engine friendly directory
  6. TigerTech - Great Web Hosting service at a great price.
  7. Article-Writing-services.org - Article Writing Services creates quality content for websites and blogs at no cost to site owners.
  8. Link Building Services - Hire WeBuildLink.com for well-planned advanced link building campaigns. Very affordable. Contact us now for a FREE evaluation.
  9. Try HOTH Plus+ NOW - The First 1-Stop Link Building Solution Powered by 100% College Educated Copywriters!
  10. Professional website designs - Get a unique brand image with website designs that sets you apart and convert your visitors into customers. Make a brand, not just a website

See my disclaimer about advertising and affiliate links