At the Forge - Google Maps

Google maps out excellent Web services for keen developers.
Markers

Finally, let's look at how we can create a marker, as it is known, on our map. A marker lets us identify a particular point on a map, showing it with one of the Google Maps icons that users recognize. Moreover, although we see this functionality today, we easily can create JavaScript handlers for our markers—such that clicking on a marker causes a JavaScript function to be executed and presumably change the look of our map somehow.

To create a marker, we create a new instance of GMarker, passing it a GPoint:

var myMarker = new GMarker(new GPoint(-87.740000, 42.030000));

Now that we have created our marker, we can display it on the map:

map.addOverlay(myMarker);

If you add the above two lines within the <script> section of the HTML file, you immediately will see a red marker appear on the screen.

Now, here's where some real magic begins. Everything that we have done so far is done in JavaScript and HTML. Both of these are read and handled by the browser, but they are created by the server. This means that if we create our HTML file not as a static file, but rather dynamically (that is, from a server-side program), we can do all sorts of neat things with the JavaScript.

For example, we can create multiple GMarkers, simply by assigning them to different variables and then attaching each of them to the map. If our Google Maps page is being run by PHP, we can write a short PHP program that inserts appropriate JavaScript code into the page. For example:


<?php
$a = array(-87.740070, -87.730000);
 $count = 0;

foreach ($a as $v) {
    echo "var myMarker$count = new GMarker(new GPoint($v,
42.037030));\n";
    echo "map.addOverlay(myMarker$count);\n";
    $count++;
  }
?>

If we put the above inside of the <script> section of our page, and if we then rename the page to index.php (instead of index.html), we quickly will see two markers on the page, with slightly different longitudes and the same latitude.

Notice how the above code uses PHP's echo command to insert text into the HTML document when it executes. Also notice that we need to add semicolons—one to end the line of JavaScript (inside of the quotes) and one to end the line of PHP (outside of the quotes). These sorts of issues are always a headache when writing a program that writes another program. Finally, notice how we had to create arbitrary new variable names to avoid using the same variable over and over, and thus losing all but one of the markers. The simplest way to do this is with a $count variable, which then assures that you will have a unique variable name for each marker.

Conclusion

Google Maps is a wonderful Web application. But for developers, it's also a platform on which we can create all sorts of new applications and services that depend on maps. In particular, by dynamically creating an HTML document from a programming language, we can insert data that JavaScript can then incorporate into a map. Next month, we will see how we can do this, creating our own mashup—grabbing information from one data source and then displaying it on a Google map.

Resources for this article: /article/8939.

Reuven M. Lerner, a longtime Web/database consultant, is currently a PhD student in Learning Sciences at Northwestern University in Evanston, Illinois. He and his wife recently celebrated the birth of their son Amotz David.

______________________

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

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

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

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

Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer,
is completing his PhD in learning sciences at Northwestern University.

Google earth

Derek Belsham's picture

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

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.

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix