How to embed Google Maps in a web page
Use the Google Maps API to create a local or world interactive map for your website.
If you are the owner of a business and wish to let your potential clients know where you are or maybe you are an adventurer and wish to keep your fans informed of your progress around the world: Google Maps API is going to be the tool for you.
Google Maps API allows you to centralize a map on your local area, control the initial scale or zoom and add a marker with an information window to give clear and precise information on your business. Its all customizable, quick and easy to set-up and free.
Getting started.
First of all you will need an API key.
You can get one from here: 
http://code.google.com/apis/maps/signup.html. If you already have a Google Account it should only take a couple of seconds. There are terms and conditions and I will not attempt to detail those here but any reasonable use would easily meet those terms. Take their advice and link the API key to a domain name: I used 'justfigures.co.uk' for example for this demo.
Coding the map.
Google's introduction page to map basics is at:
http://code.google.com/apis/maps/documentation/introduction.html
and there is a great deal more at:
http://code.google.com/apis/maps/documentation/
There are many variations on the central theme so here is a summary.
To produce the map seen below you will need four code listings:
Listing 1. You will need the code here which references a file on the Google servers.
(Replace 'APIkey' with your API key.)
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=APIkey" type="text/javascript"></script>
Listing 2. You will need this code which is a JavaScript function.
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(51.4500, -0.2550), 7);
map.setMapType(G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(new GLatLng(51.589600, -0.556500));
map.addOverlay(marker);
var html="<img src='logo.gif'" +
"width='165' height='30'/> <br/>" +
"We are here.";
marker.openInfoWindowHtml(html);
}
}
</script>
The JavaScript function in Listing 2 contains the editable parameters to customize your map.
See 'Editing the JavaScript function...' below.
Both code Listing 1 and 2 go in the head of your web page between the <head></head> tags.
Listing 3. This code calls the JavaScript function.
<body onload="initialize() onunload="GUnload()">
Code Listing 3 replaces the <body> tag in your web page.
Listing 4. You will need this code to display the map.
<div id="map_canvas" style="width: 500px; height: 500px"></div>
Code Listing 4 goes in the body of your document were you wish to display the map. The size of the display for this example is set at 500 X 500 pixels and is customizable.
Editing the JavaScript function to customize your map.
There are six basic parameters in the JavaScript function to edit.
1. Centralizing the map to your local area with the latitude and longitude coordinates.
This can be done by first visiting http://maps.google.com/ and finding your local area through the 'Search Maps' button or other means. When you are happy with the general map position and scale double-click over the location you require the coordinates for and the map will centralize on that point. Retrieve the latitude and longitude coordinates by clicking on 'Link' in the top right hand corner and noting them from the URL that is displayed.
Edit the coordinates in the code line map.setCenter(new GLatLng(51.4500, -0.2550), 7); for your latitude and longitude.
2. Setting the zoom level of the map.
Control the scale and zoom of the map by editing the code line for the zoom level.
The code line is map.setCenter(new GLatLng(51.4500, -0.2550), 7); and is zoom is currently 7. The range is approximately 0 to 17. Experiment.
3. Set the default map type.
This is achieved through the code line map.setMapType(G_NORMAL_MAP) and there are currently three basic types including G_NORMAL_MAP, G_SATELLITE_MAP and G_HYBRID_MAP. Check with Google for more.
4. Set the map controls.
This is set with the code lines
ap.addControl(new GLargeMapControl()); and map.addControl(new GMapTypeControl());. There are various combinations to choose from.
5. Add and position markers.
Add and position a marker with the code lines
var marker = new GMarker(new GLatLng(51.589600, -0.556500)); and
map.addOverlay(marker) edit the latitude and longitude coordinates to suit.
You can add and position multiple markers. Just give each marker a unique name.
6. Add an information window.
Add an information window or bubble using the code lines
var html="<img src='logo.gif'" +
"width='165' height='30'/> <br/>" +
"We are here.";
marker.openInfoWindowHtml(html); and edit to suit. The information bubble will be positioned in relation to a marker.
You can only add one information window for a single map but it can be positioned over any marker. Experiment.
Summary.
Embedding Google Maps into a web page is quick and simple to do. There is a great deal more variation available then I have outlined here. Experiment.
Article by: David Beet.
Date: 14th July 2009.
Back to top.
Copyright © 2006-2010 justfigures.co.uk