Microformats in Google Maps

Tuesday, July 31, 2007 at 4:28:00 PM

If you have spent any time in certain corners of the web, you will have heard of Microformats: Clever uses of HTML that add machine-readability to everyday web pages while preserving human-readability. Microformats allow tools to make more sense of your web pages, while not changing the visual appearance for visitors to your site one whit.

Today we're happy to announce that we are adding support for the hCard microformat to Google Maps results. Why should you care about some invisible changes to our HTML? By marking up our results with the hCard microformat, your browser can easily recognize the address and contact information in the page, and help you transfer it to an addressbook or phone more easily. Firefox users can install the Operator or Tails extension; IE or Safari users can use one of these bookmarklets.

If you are on a Mac, and want to export a search result to your address book, this is how it looks:





Using Microformats in your Maps API application
You can get the benefits of microformats for your own maps applications if you change your HTML to contain the necessary hcard classes. In this simple example, we've changed the infowindow to contain an hCard formatted address. The code for that is below:

  var html = '<div class="vcard"> <span class="adr">'
             + '<span class="fn n">Googleplex<br />'
             + '<span class="street-address">1300 Amphitheatre Parkway</span><br />'
             + '<span class="locality">Mountain View</span>, ' 
             + '<abbr class="region" title="California">CA</abbr>'
             + '<span class="postal-code">94043</span>'
             + '</span> </div>';
  map.openInfoWindowHtml(map.getCenter(), html);

If you want to learn more, head over to microformats.org.

New utility function for Google Mapplets: GAsync()

Thursday, July 26, 2007 at 5:53:00 PM

The Mapplets API is like the Maps API with a twist: asynchronous calls. If you've ever used XMLHttpRequest then you've dealt with asynchronous calls before, but writing fast Mapplets can require keeping track of several requests at the same time.

While working on the Zvents mapplet, Michael Geary developed a nifty utility function called GAsync(). This lets you make several requests in a single call, like:

GAsync( map, 'getSize', 'getBounds', 'getCenter',
 function( size, bounds, center ) {
   // search using size, bounds, and center
 });

Mike has kindly donated this function to the Mapplets API so that everyone can use it. We hope that it helps you write fast and simple code for your Mapplets!

For more information on the creation and use of GAsync, check out Mike's blog post about it. The Mapplets API docs and forum will help you get started on your own Mapplet.

Test your driving directions skills (and our latest features)!

Wednesday, July 25, 2007 at 3:43:00 PM

I don't drive. Well, I used to, but then I realized I hated driving on highways, making left turns, and parallel parking. And then after a little incident, I hated making right turns too. So, I've taken up walking and (getting lost on) public transportation. This is all well and good except that I have no idea how to get anywhere besides the bus stop and the closest Wal-Mart, and this lack of knowledge can sometimes land me in not-so-fun situations. Sometimes I wish I did drive, just so I'd be forced to learn the streets around me.

But now, with the addition of driving directions in the API, I can use Google Maps to learn the optimal routes from point A to point B without ever leaving the house or venturing inside a wretched car. Below, you can play my driving directions game. After clicking the "Start New Game" button, a start (green) icon and an end (red) icon will appear. The goal of the game is to guess the (Google-calculated) route from the start to the end. After ending the game by clicking on the red icon to finish your route, you'll see the Google route show up in green and your score show up in the score board.

In the scoreboard, you can see an "AREA" score and a "LENGTH" score. The area score is my attempt to measure your deviation from the Google route, and is calculated by forming a shaded pink GPolygon from your route + Google's route, calling getArea() on the poly, and comparing it to the total area of the map. This isn't perfect, as sometimes the routes will cross eachother and cancel eachother out in the area formula. That's why I added the length score, which is calculated by calling getLength() on your GPolyline and the Google-calculated GPolyline, and comparing the results. If you can get a high score of 99.* in both AREA/LENGTH, then you're doing pretty well. Have fun!

v2.85: Wondering how looong your polylines are or how BIG your polygons are? We have the answers!

Monday, July 23, 2007 at 2:41:00 PM

In the latest version of the API, we're introducing utility functions to give you more information about your lines and shapes: GPolyline.getLength, GPolyline.getBounds, GPolygon.getArea, and GPolygon.getBounds. Below, I've modified the code from the E-Z Digitizer tutorial to show you the length or area of the drawn poly, and let you zoom to the bounds of the drawn poly.

Check out the documentation for more information, and post in the forum if you have any questions.

LocalSearch Control: 3 New Features!

Friday, July 20, 2007 at 9:58:00 AM

The AJAX Search team has added 3 new features to the LocalSearch Control to give developers more flexibility:

  • Result List Placement Control
  • Custom Search Form Hint Text
  • Idle and Search Completion Callbacks

You can read all about the new features in the programming guide, or you can try them out here in this LocalSearch control playground. Play with different options to see the resulting control on the map, and then check out the code below the map. Then when you're happy, copy and paste the code into your map app.
Note: If you haven't added a LocalSearch control to your map, you'll need to add several script tags and CSS import statements to your HTML. Check the documentation for more information.

v2.84 Changes: GGeoXML Methods, GDraggableObject Events, & Geodesic Polylines

Wednesday, July 11, 2007 at 7:14:00 PM



GGeoXML Methods:

When we released GGeoXML, the class used for overlaying KML/GeoRSS files on API maps, we promised we'd continually improve it and add more features. The engineers added support for Ground Overlays and Network Links soon thereafter, and now they've given developers GGeoXML functions to make loading and viewing files easier. GGeoXML now comes with a callback function that's entered once the file has loaded, plus a number of utility functions: hasLoaded(), loadedCorrectly(), getDefaultCenter(), getDefaultSpan(), getDefaultBounds(), and gotoDefaultViewport().

Here's some quick code showing you how you'd use a couple of these functions to automatically center the map on a loaded KML file:

var geoxml = new GGeoXML("http://kml.lover.googlepages.com/my-vacation-photos.kml", function() {
  if (geoxml.loadedCorrectly()) {
    geoxml.gotoDefaultViewport(map);
  }
});
map.addOverlay(geoxml);

Below, I've redone the original example of the GGeoXML loader to use similar code, so I no longer need to hard-code the viewport for each file. I've also chosen to show a "Loading..." indicator while the GGeoXML file is being loaded, as some files can take longer than others to load.


GDraggableObject Events:

In this release, we've also given you more control over GDraggableObjects with 6 new events: mousedown, mouseup, click, drag, dragstart, dragend. Why? Because everybody loves draggable objects, and the more you know about what the user's doing to your draggable object, the better! Below is a simple example that lets you drag the Google Maps logo around while it shows you the current event:

Geodesic Polylines:

And now for something completely different... We've added an optional parameter to GPolyline to let you create geodesic polylines (aka "Great Circles"). A geodesic line is the shortest route between two points on the surface of the earth, and often resembles the path that airplanes take to get you to your destination in the most efficient manner. Check out this example using the new geodesic option, created by Finnish Developer Esa.

Mapplets Launched - Add Your Mapplet to the Growing Gallery of Maps Plugins

at 9:43:00 AM

Looking to drive more traffic to your Maps API site? Mapplets have now been launched on Google Maps and are a great way to reach users with your geospatial data. You can create your whole mashup inside a Mapplet, or you can use it as a teaser that gives users a taste of your data and sends them to your Maps API based site for the full version.

Here's a YouTube Mapplet that I created last week. It plots recently uploaded YouTube videos on the globe based on the location that the user set when they uploaded the video. It was very easy to put this Mapplet together since the Mapplets API is very similar to our Maps API. The Mapplets API docs will help you get started on your own Mapplet.

Here are some videos that show how users can add Mapplets and My Maps to their maps:
http://maps.google.com/help/maps/mymaps/add.html
http://maps.google.com/help/maps/mymaps/create.html

Here are some articles on the Mapplets launch:

Reuters - Eric Auchard
http://www.reuters.com/article/technologyNews/idUSN1024754220070711
"Google Inc. will introduce on Wednesday a new feature that lets users create personalized maps which plot the locations of everything from cheap gas locally to the latest earthquakes worldwide."

CNET - Elinor Mills
http://news.com.com/8301-10784_3-9742147-7.html
"Google is really pushing the mapping envelope."

AP - Mike Liedtke
http://www.businessweek.com/ap/financialnews/D8QA5DBO0.htm
"It's a really powerful innovation," said John Hanke, Google's director of maps. "It's like combining chocolate and peanut butter. They're good by themselves, but the combination is much more valuable than when they are served in isolation."

Have fun coding!
-Brandon

Looking for stability in life/mashups? Try out v2.s!

Monday, July 09, 2007 at 9:20:00 AM

Here at Google, the engineers love to add new features to the Maps API. In order to get these features in your eager coding hands as fast as we can, we currently update the Maps API about every two weeks. This breakneck pace is ideal for those of you that want the latest and greatest enhancements that we can offer. But some of you may prefer a version of the API that changes less frequently, so that you can be sure that newly introduced features don't affect the behavior of your maps application in unexpected ways.

Starting this week, we are offering a "stable" version of the Maps API that will be set to a version of the API that has been thoroughly tested over the past several weeks. You can point your application to the stable version to avoid the biweekly updates we do with the standard Maps API versions (v=2, v=2.x). We'll then update the stable version every few months to another version that is also well-tested, but includes the new features that have been launched. Once we release a new stable version, your application will automatically begin loading the updated set without making any changes to your code. But don't worry, we'll pre-announce any updates to the stable version so that you have adequate time for testing.

In order to use the stable version, you can simply change your API call from &v=2 (which accesses the current version of the API) to &v=2.s (the stable version). For example, your javascript source tag would look like:

<script src="http://maps.google.com/maps?file=api&v=2.s&key=ABCD" type="text/javascript"></script>

The stable version is currently set to 2.73, which was released earlier this year. Please be aware that version 2.73 doesn't include some of the latest features such as driving directions, KML/GeoRSS overlays and the traffic layer. For more information on the changes that have been made since version 2.73, please see the list on the Google Maps API Group page:

http://groups.google.com/group/Google-Maps-API/web/api-version-changes

UK Geocoding Now Available in the Maps API

Friday, July 06, 2007 at 1:38:00 PM

We're quite proud that the Google Maps API community is an active bunch in Europe, and particularly, the United Kingdom. To thank all those enthusiastic developers in the UK, we're happy to announce that the Maps API geocoder now supports address geocoding for United Kingdom addresses. I can now geocode all the places I've visited recently: London, Salisbury Castle, Ipswich, Box Hill, Stonehenge, and my relatives' house in Cambridge (not telling the address!). Try it out with your favorite UK addresses or places below:

Developers should be aware that the API geocoder is not using the same resources as maps.google.com and may not return the same results. You should also know that neither of the geocoders will help you locate the "loch ness monster." Sorry, Google can't do everything (yet). :)