Home ›

At the Forge - Google Maps

Issue 146

From Issue #146
June 2006

Apr 28, 2006  By Reuven M. Lerner
 in
Google maps out excellent Web services for keen developers.

During the past few months, we have looked at a number of Web services. Web services is a catch-all phrase for the ways in which Internet companies are making their data available to the general public, for use in people's own applications. Thus, Amazon makes its product catalog available for us to create on-line stores and pricing programs, eBay allows us to search through (and bid on) products available for sale, and Google makes its search results available for viewing and manipulation. Each company restricts the ways in which we are allowed to use the provided data, but the trend appears to be toward additional openness and availability.

Sometimes, that openness comes in a package that is slightly different from the standard form of Web services. That is, some companies make their data available using specialized libraries that call the services for you, hiding the specifics of the calls from your application. One of the most famous examples, and the one that we look at this month, is Google Maps. I have found Google Maps to be one of the most compelling and powerful Web applications out there. Not coincidentally, Google Maps was one of the first applications to make use of Ajax, a term that describes how we can use a combination of JavaScript and XML to grab data from remote servers and then use the results to update a Web page dynamically.

This month, I explain how easy it is to create maps using the Google Maps API. We create some basic maps and even put up small markers indicating locations of interest to us. This will serve as a building block to creating our own mashups, the increasingly popular term for the use of Google Maps to display information culled from a separate database.

Basics

Google Maps, like most Web applications, divides the work between the client (a Web browser) and a server. However, the traditional division of labor has been fairly unequal, putting almost all of the computational onus on the server, giving the browser responsibility for display alone. Ajax changes this, using one or more JavaScript libraries that know how to manipulate the data being displayed in new and interesting ways.

Although Google may someday release an API that will allow us to create our own Ajax applications with its map information, the current release requires that we install and use everything in a single package. That is, Google provides a JavaScript library—or more precisely, a link to a JavaScript library located on Google's servers—that we incorporate into our pages and then use to create a map.

In order to display maps, we need to use that JavaScript library. However, both to keep track of who is using the API and also to ensure that it is being used according to the rules, the library is available only to holders of a key.

Now, we have seen this sort of restriction before, both in Amazon's Web services and also Google's main Web services (that is, for search results). However, the key used in Google Maps is somewhat different; it is keyed both to a particular person (with a Google account) and to a particular URL. This means a map key that works at http://www.example.com will not also work at http://www.example.net.

The first step in using the Google Maps API is to decide under which URL you want to put the maps. I decided to create a new Apache virtual host on my system, which I named maps.lerner.co.il. I then registered with the Google Maps API page (www.google.com/apis/maps), indicating that my applications would be under the URL maps.lerner.co.il. Several seconds later, I was greeted with a page containing my API key, as well as a simple starter page that can display a map. The key is a very long string of ASCII characters, separated by spaces.

Because we will base our applications on HTML, we should take a close look at it: 

<!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>
    <script
src="http://maps.google.com/maps?file=api&v=1&key=
↪ABQIAAAAQQK9JhAXQ9eq-G55qgu1ExScF-BH9Y-SIKcAjU8YFS_
↪uTREdFBSs2-11UWY0kXbUv6argoPyrx3YTg"
type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"><;/div>
    <script type="text/javascript">

    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

    </script>
  </body>
</html>

The HTML document begins by declaring its DOCTYPE, which turns out to be strict XHTML. XHTML is a wonderful idea and ensures that HTML is structured according to all of the strict XML rules. That said, many HTML pages do not adhere to this standard and thus are considered either transitional (meaning, XHTML with a liberal eye) or nothing at all. Because Google Maps tries to be compatible with as many browsers as possible, it benefits greatly from strict adherence to XHTML.

In the <head> tag, we see that there is a <script> tag, which loads JavaScript source from Google's servers at maps.google.com. This ensures that the latest version of the JavaScript library is always available to us and our users. Google promises that when it upgrades the map API, it will give a one-month grace period to allow developers to learn about incompatible changes they might have made.

In the body of the HTML document, we then have a div tag, whose ID is map. This is the node that we will be passing to Google's JavaScript library. The style attribute passed to the div tag contains a width and a height; these determine the size of the map. Your site can display any combination of width and height for the map, allowing you to make adjustments for your particular site design.

Inside of the div, we finally get to the heart of the matter, with three calls.

First, we create an instance of a GMap object. As you might imagine, a GMap represents a particular map within the world of Google Maps. We attach the GMap object to the node with the ID of map. (If the element does not exist, the map will not appear on the screen.) This means, by the way, that you can have more than one map on a particular Web page—simply create multiple <div> tags, each with its own unique ID attribute, and attach different instances of GMap to each <div>.

Once we have created an instance of GMap, we can send it messages to control its behavior. For example, we can add a control to it, allowing us to zoom in and out. In this document, for example, we add a small map control by invoking the addControl() method, passing it a new instance of GSmallMapControl. The GSmallMapControl contains +/– buttons for zooming, as well as arrow buttons for moving the map without having to drag the mouse.

Google provides two other control types as well, known as GSmallZoomControl (which has only the +/– zoom buttons) and GLargeMapControl (which includes everything that the GSmallMapControl does, plus buttons that allow you to jump to a particular zoom level). The controls always appear in the top-left corner of the map, and there is no way to stop you from instantiating more than one of these controls. This means if you aren't careful, you might create more than one control, leading to an ugly map and site.

After creating our map and adding a control to it, we then instruct the map to show us a particular point. Points in a Google map are represented with the GPoint data structure, which represents a single point of longitude and latitude. Longitude and latitude can be represented with either degrees or floating-point numbers; for obvious reasons, GPoints are constructed using the latter. The example document has the following call: 

map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);

The above line of JavaScript sends a centerAndZoom message to the map object. It instructs the map to center itself around the point described by the GPoint and to display the map at level 4. The closest zoom level is 1, and the farthest away is 15, with levels 16–18 showing different types of wrapping. Level 4 allows you to see streets and is a good starting point for people using a map.

It is important to realize that GPoint objects are created with longitude and latitude as their parameters, and not the reverse. This is probably because Google engineers thought in terms of x and y coordinates, which are more natural for math and science people. However, coordinates are often given in latitude, longitude pairs, as opposed to the reverse—so be careful before blindly entering coordinates into a program without checking their order and meaning.

The GPoint created in this default document is in Palo Alto, California, presumably pointing to Google's offices. To look at another area on the map, simply substitute a different set of coordinates. For example, to look at Skokie, Illinois (where I'm currently living), I simply substitute a different set of coordinates: 

map.centerAndZoom(new GPoint(-87.740070, 42.037030), 4);

Sure enough, when I reload my page, I'm now looking at a map of Skokie, rather than Palo Alto.

Finally, Google provides us with the ability to switch between three different views, known as map, satellite and hybrid. By default, these controls are shown in the top-right corner and appear thanks to the line: 

    map.addControl(new
GMapTypeControl());

As you can probably guess, the above line sends an addControl message to our map object, handing it a new instance of GMapTypeControl.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Google maps and GPX

Frank Glandorf's picture
Submitted by Frank Glandorf (not verified) on Thu, 09/07/2006 - 12:46.

The use of XML in the Google maps presents an opportunity to make use of existing data. For example data from GPS units are often available in GPX formated files (see http://www.topografix.com/gpx_resources.asp ) This reference contains a number of webpages that will display your GPX file using google maps.
At the risk of "me too" here's my version. Unlike the others I tend to use URL options to display the map as I need to. Here's a hybrid map of a rail-trail near Xenia, Ohio. One may click on the bubble near the center to display the info. Clicking on the info picture displays a bit more info about it.
http://glandorf.myiglou.com/gpx.html?map=lmr/xenia.gpx&type=3

centerAndZoom

guigue's picture
Submitted by guigue on Sat, 06/10/2006 - 21:44.

In the article is mentioned the call to

map.centerAndZoom(new GPoint(...,...),4)

When I use this method my maps do not display. In fact, there is no reference to centerAndZoom in the API Google Maps documentation. I used, as suggested by the Documentation, setCenter instead. In that case, the zoom appears to work in the inverse: greater value, zoom in, lower value, zoom out.

Could you comment about this Reuven?

Thank you very much,

Guigue

Guillermo Guigue Giménez de Castro

centerAndZoom

Reuven Lerner's picture
Submitted by Reuven Lerner on Wed, 06/28/2006 - 00:58.

Hi, Guigue. You might laugh, but I only realized recently that people were commenting on my columns in this forum.

In any event, a quick Google search shows that I'm not the only one using centerAndZoom. I wasn't sure where I learned it, since I read a few books, articles, and code examples in preparation for the column. But I just found a reference to circleAndZoom in "Pragmatic Google Maps," so that's probably where I picked it up.

I know that the Google Maps API changed recently, but based on a quick check of my code, I don't think that this part of the API changed. It might be undocumented, but I didn't really consult the official Google docs as much as a bunch of resources that I found online, plus the Pragmatic book.

I hope that this helps!

Senior Columnist, Linux Journal

Senior Columnist, Linux Journal

Google earth

Derek Belsham's picture
Submitted by Derek Belsham (not verified) on Thu, 05/18/2006 - 22:43.

Hi

If you think Google map is interesting (and it is). Wait to you see google earth. You work with a XML language called kml.

I am looking forward to next month.

Derek

Google earth

see's picture
Submitted by see (not verified) on Tue, 08/22/2006 - 20:27.

I´m using Google Maps and I like it. I couldn´t find information about Google Earth inplementing in websites. When I copmpare services, I would prefer Google Earth.

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions