How to Add a Google Map to a Web Site

Google Maps are Powerful and Can Easily be Added to any Web Page

Dec 3, 2008
Mark Alexander Bain

Add Google Maps to Any Web Site - Google Maps

Is a description of how to get to a location not good enough? If that's the case then add a Google Map to any web site - just by using a simple piece of Javascript code.

Google maps is a powerful mapping system that allows its users to view both maps and satellite pictures of any location in the world. However, even more importantly (from a web site designer's point of view), Google provides a free API (Application Programming Interface) that enables a web site designer to add Google Maps to any web page. All that the web site designer needs are:

a Google Maps Key
a little bit of Javascript code

Obtaining a Google Maps Key

A Google Maps key may be obtained from the Google API sign up web page. Each key:

is only valid for a single web site
must be used whenever the API is accessed

That said - it only takes a few seconds to generate the key and it's free.

Calling the Google Maps API

The Google Maps API can be accessed very easily; it is actually a Javascript library and is loaded as part of a web page head section:

script

src="http://maps.google.com/maps?file=api&v=2&key=abcd123&sensor=false"

type="text/javascript"There are two things to take note of when loading the Google Maps API:

the key parameter in the API URL needs to contain the key generated by the Google API web site
the sensor should be set to: false if the API is being called from a web site; true if it is being called from a sensor (such as a mobile phone with a GPS)

Once the API has been loaded then the map itself can be initialized.

Initializing the Google Map

The map is initialized by creating a Google Map GMap2 object (if the browser is compatible):

function initialize() {

if (GBrowserIsCompatible()) {

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

The center of of the map then needs to be set with the setCenter method; this requires:

the latitude of the location
the longitude of the location
the zoom level (the greater the number the greater the detail)

map.setCenter(new GLatLng(52.7109, -0.3856), 100);

Finally the type of map is selected; this can be:

G_NORMAL_MAP
G_SATELLITE_MAP
G_HYBRID_MAP: the normal map overlaying the satellite photographs
G_PHYSICAL_MAP: terrain information

map.setMapType(G_HYBRID_MAP);

}

The map is actually loaded at the same time as the body and should be unloaded with the GUnload method - this will prevent any memory leaks:

Displaying the Map

The map itself is a div with the id map_canvas:

< div id="map_canvas" style="width: 50%; height: 50%;">

And with that a simple map of anywhere in the world can be displayed in a web page. How to Find the Latitude and Longitude with Google Maps The maps are always centered on a location's latitude and longitude; the latitude and longitude can be found by using using Google Maps, even though Google Maps does not display them:

go to the Google Maps web site (http://maps.google.com)
center the map on the desired location
enter the following into the address box of the web browser:
javascript:void(prompt(',gApplication.getMap().getCenter()));
press return and read the latitude and longitude from the box that will be displayed

Summary

It is very easy to add a Google Map to any web page; all that's required is for the web site designer to:

obtain a free API key for the web site
use the API key to load the Google Map Javascript API
use Javascript to create a GMap2 object
center the map on a location's latitude and longitude by using the setCenter method
define the type of map to display

And so, with the minimum of effort, a professional looking map will be displayed - all through the power of Google Maps.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...