Using Google Code: Pt. 2 - Maps

Written by: Finn Orfano • Edited by: J. F. Amprimoz
Updated Oct 11, 2010 • Related Guides: Google | Google Maps

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

click to enlarge

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 <script src ="..."> element to the following:

<script type="text/javascript" src="http://www.google.com/jaspi?key="This will be your key"></script>

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 <script> 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

http://maps.google.com/maps?f=s&utm_campaign=en&utm_source=en-ha-na-us-bk-gm&utm_medium=ha&utm_term=google%20maps

click to enlarge

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:

You are free to copy and use this sample.

License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Google Maps API Sample</title>

background-color: white;

color: black; font-family:

Arial, sans-serif;

}

</style>

<script

src=http://www.google.com/jsapi?key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA

type="text/javascript"></script>

google.load("maps","2.x");

function initialize() {

var map = new google.maps.Map2(document.getElementById("map"));

map.setCenter(new google.maps.LatLng(41.2867, -95.8703), 10);

}

google.setOnLoadCallback(initialize);

</script>

</head>

</body>

</html>