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.

GraywolfSEO.com runs on the Genesis Framework

Genesis Framework

Genesis lets you to quickly and easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.


tla starter kit

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. Need an SEO Audit for your website, look at my SEO Consulting Services
  4. TigerTech - Great Web Hosting service at a great price.
More in Google, npb, npp, ntt, Tools
Annotated Google Chicago Vacation Map

Recently Mrs. GW had to go to the ACCM show in Chicago, so we took the kids along went a...

Suggestions For Google Sitemaps

Hey Google Sitemaps and Google Sitemaps Blog (not sure which will get me noticed first) how about putting a link...

Google Mis-Matching Domain Content on Shared IP’s

I'm not entirely sure what's going on here but I can tell you it's significantly wierd. I can't say exactly...

Close