Google Maps can give your web application that added “A picture is worth a thousand words” edge. How to add Google Maps and sample code are presented in this second article in a series on using Google AJAX APIs to enhance your web presence. Simple, direct instructions and working example.
A Few Map Basics
Google maps can be a very useful part of a web application. Especially if you are trying to guide your viewer to your brick and mortar business, or point out a place of interest somewhere in the world. Part one of this series introduced the Google Loader and how it permits the use of multiple APIs in the same web application. This article isn’t going to rehash that information; but, there is one addition to make. If you are using the API key feature from Google, you will need to modify the element to the following:
<script type=“text/javascript” src=“https://www.google.com/jaspi?key="_This will be your key_">
After that, the rest of the Maps API coding generally follows the structure we used for the search APIs. There are a few key things to make note of regarding this code. In the opening you will need to make sure to use your own key. Again, you will need to request this from Google as explained in Part 1 of this series. In this case we are using a function call to implement the API.
Internet Explorer has experienced memory leak issues from some functions when the page unloads. So, you will want to use <body onunload=GUnload()"> as shown in the sample. This is a case where you do need to keep the G prefix rather than use the namespace convention.
Setting Ground Zero

The line map.setCenter (new google.maps.LatLng(41.2867, -95.8703), 10); breaks down as follows: Map.setCenter establishes the center of the map display using the parameters supplied. LatLng are the comma separated values for Latitude (positive = Northern Hemisphere, negative = Southern Hemisphere) and Longitude (positive = Eastern Hemisphere, negative = Western Hemisphere). My example is for Omaha, Nebraska, USA. Latitude values range from -90 to 90 while longitude values -180 to 180. The equator is latitude zero. The last parameter (in this case 10) is the zoom value. The higher the number the closer the zoom. Values range from 0 (zero) to 21. The value 13 is a street map level. There is a tool available, here, that provides the values for a given location.
The div declaration in the body has two elements. The first is the ID which must be the same as that named in the document.getElementByID() method in the function. The second element is the width and height of the canvas (image) in pixels.
This is a very basic explanation of map integration. There are a number of modifications that can be included to create layers, markers, and polylines. The maps can be interactive by enabling scroll and zoom controls. More details can be found at Google’s Static Maps pages.
The Code
This code sample, adapted from the Google samples, presents integrating a static map: