Google Maps Mashups: Not just for coders!

Posted by Dion Almaer, Google Developer Programs

Mike Pegg of Google Maps Mania has done a great job keeping the community updated on new and interesting tools that use the Google Maps APIs. His latest post targets the latest creation tools including:

• TinyMap: Quick and easy Google Maps
• Add your own map markers on CommunityWalk: Automatically adds a legend icon, shadowing and IE printing functionality. (Example here)
• GeoMonkey: Build your own map and explore others.
• Mapdaze: Google Maps creation tool meant for embedding into blogs.

We are always excited to see developers create tools that make it easy for anyone to effortlessly create their own Google Map. There's no reason why developers should be having all the fun. :)
If you'd like to let us know about your Google Maps app or ask questions about creating one, please head over to the Google Maps API group.

GDownloadURL Update - Better Error Checking!

Posted by Pamela Fox, Google Maps API Team

The latest update to the Maps API (v2.74) includes better error checking for GDownloadURL. Previously, if you sent a request to download a file with GDownloadURL and the server timed out the request, the onload function might never be called. Now, GDownloadURL will enter the onload function and return null for the data parameter and a -1 as the response status code parameter.

In the example code below, we process the data if the request was successful, and then alert messages if the request has timed out or errored. In your own applications, you may decide to do more or less error checking, depending on your needs.

// Download the data in data.xml and load it on the map. 

GDownloadUrl("data.xml", function(data, responseCode) {
  // To ensure against HTTP errors that result in null or bad data,
  // always check status code is equal to 200 before processing the data
  if(responseCode == 200) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                              parseFloat(markers[i].getAttribute("lng")));
      map.addOverlay(new GMarker(point));
    }
  } else if(responseCode == -1) {
    alert("Data request timed out. Please try later.");
  } else { 
    alert("Request resulted in error. Check XML file is retrievable.");
  }
});

View example (async.htm). This example uses the external XML data file data.xml.

A Cool JSF and Maps Mashup

Posted by Chris Schalk, Google API Team

We're always excited when we see new tools that make it easier for different groups of developers to use the Google Maps API. Matthias Wessendorf, a server-side Java expert, recently posted a cool mashup showing how easy it is to integrate server-side Java technologies with Google Maps.

In this mashup, Matthias has combined JavaServer Faces technologies, Facelets and Apache Trinidad with Google Maps. The end result is a datagrid component with an embedded Google map. This is done without requiring the JSF developer to code in JavaScript.

See: http://jroller.com/page/mwessendorf?entry=web_2_0_building_mashup

This mashup published in a Google Code project: http://code.google.com/p/facesgoodies/

Write Your Valentine's Day Messages in Google Maps

Posted by Pamela Fox, Google Maps API Team

For those of you in countries that celebrate it, Happy Valentine's Day! Just in case some of you haven't found that perfect geeky V-Day card to send your loved one, friends, stalkee, etc., I've put together a quick example using GPolyline to write messages on to the map (and share them!). Try it out below by positioning the map, entering a short message, and pressing "Etch it!" The end result is your message "scratched" onto the map as if you'd scratched into tree bark.

Of course, I'm not actually scratching the earth or touching the satellite imagery at all. This is simply an example of a fun way to use the GPolyline class, commonly used to draw bicycle or driving routes. Here's how it works:

1. Positioning the map: This uses the GClientGeocoder and is based off this example. When the user enters an address and presses the button, I use the geocoder.getLatLng() method to find the corresponding latitude and longitude for the address. No geocoder is perfect, so I alert an error message if it can't find the address.
2. Writing the message: Here's the fun part!
   • I've pre-defined each letter/symbol as an array of pairs of points defined on a 1*1 grid. The image here shows the 6 lines that define the heart ("<3"). The corresponding javascript for the heart is:

      "<3": { "lines": [
      [[0,.25],[.25,0]],
      [[.25,0],[.5,.25]],
      [[.75,0],[.5,.25]],
      [[1,.25],[.75,0]],
      [[1,.25],[.5,1]],
      [[.5,1],[0,.25]]
      ]}

   • I parse the user input from the text box into each character, looking particularly for the 2-character long heart string.
   • I define a constant X & Y size to scale the points by. If the message inputted is particularly long, we redefine the constant to fit the message to the map.
   • For each letter/symbol, I iterate through the points and create a set of scaled points. For a scratchier effect, I connect the second point to a point slightly offset from the first point.
   • With each set of scaled points, I create and add two GPolyline objects to the map with different style attributes. The first is a thick & white, and the second is thin & dark. This helps the letters stand out.
3. Permalink to this Map: This creates a URL with parameters attached to the end, e.g. gpolyletters.htm?message=HI&lat=40.267&lng=180.456
   • There are no native javascript functions specifically for parsing URL parameters, but many javascript users have created utility functions to help do this. I'm using a function called getURLParam() that relies on regular expressions.
   • Certain characters, like the "<3", will be URL-encoded. To get back the original string, I call unescape(String).
   • Since I need to pass the latitude, longitude, and zoom parameters as floats and integers and my URL parsing function always returns strings, I use parseFloat(String) and parseInt(String).
   • If no parameters are specified in the URL, I use the default values.

If you thought that was fun, here are a few examples of other sites that use GMaps to let you send creative Valentine's Day greetings:
GeoGreeting - Spell your message with letter-shaped buildings!
MapMsg - Send your message as a smoke signal!

As always, if you're inspired to create a GMaps mashup and need help from the global community of developers, please stop by the Google Maps API Group.

Search for KML in Google Earth

Posted by Chikai Ohazama ♥, Product Manager, Google Earth Team

Search is at the heart of everything we do here at Google. That's why I'm excited to announce a new innovation in search available today in Google Earth. Users can now search through all of the world's Keyhole Markup Language (KML) files, making the millions of Google Earth layers on the Web instantly accessible for geobrowsing and exploration. Last month, we encouraged you, our Maps API users, to create KML site maps for your mashups. Today's launch is the next step towards making those sitemaps - and all of the world's geographic information - discoverable by users worldwide.

To try it out, just start up Google Earth, zoom to a location of interest, and type in a search query. For example, go to New Zealand, and search for "Lord of the Rings." You'll see the KML results below the local results in the search panel on the left hand side:

Click on one of the KML results and the pop-up bubble will come up in the 3D view and you can read more about the KML file:

If it seems interesting, then you can click on the link and layer the KML file over your Google Earth imagery:

This will initially be available only in Google Earth, but soon the ability to search and view KML files will be live in Google Maps. Stay tuned...