The first thing you need to be able to use the Google Maps API is an API key, which can be obtained from the Google Maps API site. This API key is unique to a domain (subfolder in a domain) and everything below that, so you only need one key to use the API from anywhere on your site, although to use the Google Maps API on a different site, you would need to get another key for that site.

Once you have the key, it is a rather easy affair to get an embedded Google map on your website.

The first step is to load the Javascript API using a standard script tag, using your API key as one of the parameters.

We then create a div, specifying an id, and set the width and height. Within this div, we put the Javascript to create the map.

A map is created using the GMap function, passing it the div which will contain the map.

We can then add a control panel, which will enable us to move around, and also zoom in and out, using the map.addControl() function. Some of the possible types of controls are GLargeMapControl3D, GLargeMapControl, GSmallControl, GSmallZoomControl and GSmallZoomControl3D.

We then need to add a control which enables us to set the map type, which is also added using the map.addControl() function. The map type control is GMapTypeControl.

Once we have created the map, we need to tell it where to point to, which in the case of the example is the Cape Town CBD, which is at 18.417 degrees east and 33.917 degrees south, using the map.centerAndZoom() function. The second parameter is the zoom level, which in this case is set to 3.

Finally, we create a marker, so that we can highlight the spot on which we are focused. We add a new marker with the map.addOverlay function. 

	<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAARpAQilYXWb374JbdyaxLNxQ_Nb3DJA7JSD-nCmfDwG8IFuEtORTDhFCknXi3QqxAWC5lRIMIPuIghA" type="text/javascript"></script>
	<div id="map" style="width: 400px; height: 300px"></div>
	<script type="text/javascript">
		//<![CDATA[
		var map = new GMap(document.getElementById("map"));
		map.addControl(new GLargeMapControl3D());
		map.addControl(new GMapTypeControl());
		map.centerAndZoom(new GPoint(18.417, -33.917), 3);
		map.addOverlay(new GMarker(new GPoint(18.417, -33.917)));
		//]]>
	</script>

And once you got that code in place, you should be able to see this

Share