Ajax: It's not only code

Ajax works outside the page but safely inside the JavaScript sandbox.

1 2 3 4 5 6 Page 6
Page 6 of 6

Google Maps

One of the most famous Ajax/DHTML/JavaScript applications is Google Maps. It became even more popular when the company released an API that enabled people to quickly and easily add sophisticated mapping to their web pages. This one application, more so than probably any other, is what fires the imagination regarding Ajax and the ability to mix and mash technologies.

It’s not unusual for people to record the longitude and latitude of a photograph’s location into that photo (a process known as geocoding), which is then parsed out and passed to a Google Maps API call. A map is then created to show exactly where the photo was taken.

Geocachers, that roup of passionate global positioning satellite (GPS) users, utilize Google Maps to mark geocaches (hidden objects of little or no value used as a way to mark the spot). Others use Google Maps to provide driving directions, to mark landmarks, or even play games. It’s a rich and easy-to-use API.

To use Google Maps, you first need a free API key, which you can get at the Google Maps API web site (http://www.google.com/apis/maps/). This is used as part of the URL given in the src attribute of the script tag. For instance, the following shows how I use my key for learningjavascript.info:

<script 
src=
"http://maps.google.com/maps?file=api&amp;v=2&amp;
key=ABQIAAAAprpnCG3LM_
    SOd5dAqo4g7RThwcj_1x2ShM2_
    WlFws98yyiZZxRQyUhBJw9
    Ty1j6jpEUo_v6PFZfJdQ"
type="text/javascript"
></script>

That key has to match the exact domain and subdirectory location where you plan on putting your Google map pages. It’s very picky.

There’s an extensive set of examples and documentation at Google, and I won’t take the time to cover what the company covers so well. When the key is generated, Google even gives you a small application you can use to start your development. That’s what I’ll use.

Google’s small example just gives a map in a box, with no controls. I’ll add on some functionality to create an application that puts markers on the page when the reader clicks the map, and displays an information window with the longitude and latitude. I’ll also direct the map to the location of one of my favorite objects, the St. Louis Arch. It looks very impressive in the satellite view.

In Example 13-7, a new Google Maps object is created, passing in the DIV element in the page where the map will be located. Once created, two controls are added: one to zoom in or out in the map and one to switch between map, satellite, and hybrid views. Given the latitude and longitude, the map is then centered in St. Louis.

Once centered, an event listener is added for the click event on the map element. An anonymous function (all this should look familiar to you, because we’ve covered everything used so far) is attached to the event listener to test that the point where the click occurred already has a marker. If it does, it’s removed. If not, one is placed, and an information window is opened above it, with the latitude and longitude of the point.

Example 13-7. Working with Google Maps

<!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 JavaScript API Example</title>
    <script src=
"http://maps.google.com/maps?file=api&amp;v=2&amp;
key=ABQIAAAAprpnCG3LM_SOd5dAqo4g7RThwcj_
    1x2ShM2_WlFws98yyiZZxRQyUhBJw9Ty1j6jpEUo_v6PFZfJdQ"
type="text/javascript"
></script>
    <script type="text/javascript">

    //<![CDATA[

    function load( ) {
      if (GBrowserIsCompatible( )) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl(  ));
        map.addControl(new GMapTypeControl( ));
        map.setCenter(new GLatLng(38.624464, -90.18496), 15);

        GEvent.addListener(map, "click", function(marker, point) {
                if (marker) {
                        map.removeOverlay(marker);
                } else {
                  marker = new GMarker(point);
                  map.addOverlay(marker);
                  marker.openInfoWindowHtml(point.lat( ) + " " + point.lng( ));
                }
                });
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load( )" onunload="GUnload( )">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Google Maps supports Ajax XMLHttpRequests, including the various formats discussed in this chapter.

Finally, Google Maps uses function closures. To prevent memory leaks, replace the body opening script tag with the following:

<body onunload="GUnload( )">

This removes the circular references that can lead to leaks. Do take some time to enjoy Google Maps, and also make sure you click the satellite view with this example—the Arch is impressive.

Learning JavaScript

By Shelley Powers

ISBN: 0-596-52746-2

http://www.oreilly.com/catalog/learningjvscpt/

Copyright © 2007 O'Reilly Media, Inc. All rights reserved.

Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media (www.oreilly.com )

digg this story

| |

Slashdot

  Slashdot It!

Copyright © 2007 IDG Communications, Inc.

1 2 3 4 5 6 Page 6
Page 6 of 6
  
Shop Tech Products at Amazon