Playing with the Google Map API


By David Fekke
January 17th, 2011

I have had a lot of fun playing around with some of the Google APIs lately. My favorite so far is the Google Map API. If you have seen the Google Maps maps.google.com.

Google Maps uses an AJAX javascript object to display Interactive map within a div tag. AJAX stands for Asynchronous Javascript and XML. The Javascript object can call back to the Google server to pull updated information without having to reload the whole page. Google requires that the page use pure xhtml code and that you have a Google Map key. You can get a key by going to this page at Google. Place the following script call in the head section of your html page.

Inside the body of the html page, place a div tag with the ID set to MAP.
"map" style="width: 900px; height: 600px">
The next thing that needs to be done is to create a Javascript object based on the div tag.
var map = new GMap(document.getElementById("map"));
There are several different controls that can be placed on the map. For the control with the zoom slider, you will need the large control.
map.addControl(new GLargeMapControl());
The map is centered using a what is called a gpoint and the zoom level. The code looks like this;
map.centerAndZoom(new GPoint(-81.48125, 30.30912), 2);
The Gpoint is based on Geocodes, which is a decimal version of Latitude and longitude.
← Previous Page  Next Page →