Second example of embedding Google maps

2340 Broadmoor

Example 2: Using Google Maps API for Presidential Reception locations:

Address: 2340 Broadmoor Drive East, Seattle WA 98112.

Code

Document Head

<script src="http://maps.google.com/maps?file=api&v=2&key=[your key here]" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
  if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("map_canvas"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GScaleControl());
	map.addControl(new GOverviewMapControl());
	var point = new GLatLng(47.64105, -122.29305);
	map.setCenter(point, 15);
	var marker = new GMarker(point);
	map.addOverlay(marker);
	map.openInfoWindow(map.getCenter(), 
		'<strong>Broadmoor Golf Club</strong><br /> 
		2340 Broadmoor Drive East<br /> 
		Seattle WA 98112');
  }
}
window.onload = load;
window.onunload = GUnload;

//]]>
</script>
<style type="text/css">
#map_canvas {border:1px solid #CCC; height:300px; margin:0 0 1em; width:700px;}
</style>

Document Body

<div id="map_canvas"></div>

Notes

Firstly, you need a Google Maps API key to use Google Maps, and this is tied to a particular domain. The key is passed as a URL paramenter in the first script element.

In your second script is the load() function and a set of map controls that affect the kinds of options that are available on the map. (There is also a default set which appear if you don’t really define anything.) The map coordinates are defined here, and also any text that should appear in the openInfoWindow() popup. You can format this using basic HTML.

Finally, the div element needs the same id="" attribute as named in the function, GMap2(document.getElementById("map_canvas")). The map size is controlled with CSS, included here as an extra line in the document head.