Google AJAX Map APIs: Easy Steps to Adding Maps to Your Site or Web Application

Google AJAX Map APIs: Easy Steps to Adding Maps to Your Site or Web Application
Page content

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=“"_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:

This post is part of the series: Using Google Code

Do you want to bring your web pages to life? Add robust, interactive features to your web pages. This series of how-to articles walks you through adding Google APIs, simply, to your applications. Code samples in HTML & JavaScript included.

  1. Using Google Code: Part 1 - Search
  2. Using Google Code: Pt. 2 - Maps
  3. Using Google Code: Pt. 3 - AJAX Feeds API
  4. Using Google Code: Pt. 4 - Book Search