Find Yourself with the Google Maps API

<assets>
<asset id="1" name="Home" desc="The home base" lat="35" 
 ↪long="-105"></asset>
<asset id="2" name="BC Site" desc="The off-site site"
 ↪lat="34" long="-106"></asset>
</assets>

The parse_zones() function on line 24 of Listing 2 works similarly and describes shapes to be drawn on the map. The corresponding XML looks like that shown in Listing 4.

<containers>
<container id="1" name="HQ" description="This is HeadQuarters">
<point lat="35.0" long="-105.0" />
<point lat="35.0" long="-106.0" />
<point lat="36.0" long="-106.0" />
<point lat="35.0" long="-105.0" />
</container>
<container id="2" name="OffSite" 
 ↪description="This is the Offsite Site">
<point lat="37.0" long="-104.0" />
<point lat="37.0" long="-105.0" />
<point lat="38.0" long="-105.0" />
<point lat="37.0" long="-104.0" />
</container>
</containers>

Here, you see two containers and a list of lat/long points that define their boundaries. So, with what you have so far, and some slightly different data, you get a map that resembles Figure 1. By default, the map centers on a location just outside of Albuquerque, New Mexico. You see a red triangle that's filled in with green. The triangle is semi-transparent, so you can see the map through it. You also see one of the markers in the lower-right corner of the triangle. In Figure 1, I've clicked on the marker to demonstrate the information window, which I discuss a bit more later.

Figure 1. Final Results

Let's take a closer look at the parse_markers() function defined on lines 29–51 of Listing 2. This function is fairly straightforward and simply loops over a list of assets. For each asset, the function parses the lat/long coordinates of the marker and creates a marker object with them (lines 34–37). Notice on line 37 that I had to use the lat and long variables to create an object to pass to the marker constructor. Next, I set some additional attributes for each marker for later use. Then, on line 46, I added the marker to the map. Lines 48 and 49 are interesting—they allow users to click on (or mouse over) a marker and display additional information. I've commented one of the lines out because it doesn't seem to work well to have a mouse-over and mouse-click event at the same time. I probably need some additional logic, but you get the idea.

The parse_zones() function is only slightly more complex, because it has to build a GPolygon object from the points listed for each container. Lines 53–62 are similar to the first part of the parse_marker() function. The main difference is in lines 64–72 where I loop over each point that delineates the zone, create a GLatLng object for each point and push the object onto the bounds array. Then, on line 74, I create a GPolygon object with this array of points. The GPolygon constructor also allows you to specify a border color and size, as well as a fill color and opacity setting. I add the polygon to the map on line 80. I add an on-click event handler on line 81, so that when users click on a given zone, the application can perhaps provide more information about the zone.

The event handlers defined on lines 86–96 are almost identical and quite trivial, so let me make some passing comments about them all at once. They each call the map object's openInfoWindow method to open the little message bubble and display a message. In these cases, I simply display the name or description of the object the user clicks on. In a real-world application, you might use the id attribute to make an AJAX callback to a server-side database and do some really cool things.

Finally, the update_gui() function on lines 98–105 is responsible for updating some of the display information at the bottom of the map. To do this, the function uses some of the map object's methods to get the coordinates of the southwest and northeast corners of the map. Then, those coordinates are converted to strings and placed inside the appropriate container on the Web page. The map's zoom factor is handled very similarly.

As you can see, using the Google Maps API is pretty easy. The API is fairly intuitive and exhaustively documented at Google. As I mentioned in the beginning of this article, it's pretty easy to plot businesses' office locations or the locations of their customers. But, this is the Web, and it should be fun. How about a geography quiz game with real maps? Or a Risk-like game, or any number of military simulations set on a virtual Earth? I recall playing a racing game that allowed you to drive a car around a Google Map. The Google Maps API is simple and powerful, and lots of interesting things are waiting to be done with it.