Use Google Maps API to mark a location or address

This basic tutorial will take you through the steps you need to embed Goggle maps API on your site and use a marker to point out your location and then show an info window with your address and a link to get directions with your location already filled out, helping out your users as much as you can. View the working example of what you can have on your site to see how this will look and work at the end of the tutorial.

Sign up for your API Key

Goggle requires all users to obtain a unique "API key" for each site that implement Goggle maps API. Sign up for the API by entering the url of your website. Don't add a specific path, use the root url, the domain. This will cover every page that is part of that domain. You can even remove the "www" and register "domain.com" this will allow you to use "subdomain.domain.com".  Agree to the terms and conditions and click "Generate API".

You will then be taken to a page that shows you your API (take a not of it) and some sample code you can copy and paste to your site. 


<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAsoAP0MDLt21HBpoCAZ0DLBQD344IlC21WoKHBucdD45AbVnqaxQoNHNKFtJHrVaqBr2Dwfh1G1O2-g" 
type="text/javascript">
</script>

IMPORTANT: the code you copy and paste has a section  "sensor=true_or_false" you need to change this to "sensor=true" other wise you will get this error:

"The Goggle Maps API server rejected your request. This could be because the API key used on this site was registered for a different web site. You can generate a new key for this web site at http://code.google.com/apis/maps/."

Adding the HTML

The only HTML you need is:

<div id="map_canvas" style="width:650px;height:300px;"></div>

Adding JavaScript

Basic JavaScript:

function initialize() {
	if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
		var point = new GLatLng(51.55448, -0.10864);
        map.setCenter(point, 15);
        map.setUIToDefault();
		map.setMapType(G_NORMAL_MAP);
	}
}
	
window.onload = initialize;
window.onunload = GUnload;

Create a map object (var map)

  var map = new GMap2(document.getElementById("map_canvas"));

Create the point using Longitude and latitude. To get the correct figures I use Goggle maps add on: GPS Location (gpsmaplet.googlecode.com).

  var point = new GLatLng(51.55448, -0.10864);

Center the map on a given geographic point and set the UI to a default configuration.
Set the Map type to normal.
Common map types used in the Goggle Maps API:

  map.setCenter(point, 15);
  map.setUIToDefault();
  map.setMapType(G_NORMAL_MAP);

Initialize the map object from "window.onload" event. I use this system as it means you don’t have to change the body tag which can often be tricky in template systems.

  window.onload = initialize;
  window.onunload = GUnload;

Adding the Marker:

Create marker object. You can use the point variable you created earlier if the marker is the same location as the map center if not create a new point.

  var marker = new GMarker(point);

Add the marker to the map using the add overlay function.

  map.addOverlay(marker);

Using the Goggle "event.addListener()" event handler, when the marker is clicked I open up an info window focused on the marker "marker.openInfoWindowHtml" with an address and a directions link. The "Html" part allows us to use HTML in the window.


GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml('<h3>Emirates Stadium</h3>Home to Arsenal FC<br /><br /><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a>');});

The final JavaScript function:

function initialize() {
	if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
		var point = new GLatLng(51.55448, -0.10864);
        map.setCenter(point, 15);
        map.setUIToDefault();
		map.setMapType(G_NORMAL_MAP);
		var marker = new GMarker(point);
 		map.addOverlay(marker);
		GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml('<h3>Emirates Stadium</h3>Home to Arsenal FC<br /><br /><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a>');});

	}
}
	
window.onload = initialize;
window.onunload = GUnload;

View working example

I have kept this tutorial very basic as I felt there wasn't’t a real basic tutorial out there for adding just one marker to the map. There is a lot more out there you can do with Goggle Maps API. Below is a list of some great Resources:

Published 08.04.09