Pin Me

Using Google Code: Pt. 2 - Maps

written by: •edited by: J. F. Amprimoz•updated: 10/11/2010

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.

  • slide 1 of 3

    A Few Map Basics

    http://code.google.com/webtoolkit/ 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.

  • slide 2 of 3

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

  • slide 3 of 3

    The Code

    This code sample, adapted from the Google samples, presents integrating a static map:

    <!-- Copyright (c) 2009 Google Inc.
    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">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <style type="text/css"> body {
    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>
    <script type="text/javascript">
    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 onunload="GUnload()">
    <div id="map" style="width:500px; height:300px"></div>
    </body>
    </html>

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