Hi, I'm Nick Rabinowitz, guest poster. I'm a grad student at the UC Berkeley School of Information and the creator of TimeMap, a Javascript library that helps the Google Maps API play nicely with the SIMILE Timeline API to create maps and timelines that work together. Readers of the Google LatLong blog may have seen TimeMap in action already, in the Maps API's 3rd birthday post. That post promised an eventual technical explanation of how to make such map-timeline mashups. Well, exhale your bated breath: Here it is!

TimeMap in Theory:

The basic idea of TimeMap is to wrap both the Google Maps API and SIMILE Timeline in a third API in order to control interactions between a map and a timeline on the page. The "wrapping" happens via a set of Javascript objects that hold references:

  • TimeMap: The TimeMap object has references to the GMap2 object (as "map") and the Timeline object (as "timeline"), which you can access directly (e.g. It also has an array of TimeMapDataset objects.
  • TimeMapDataset: A TimeMapDataset object holds an array of TimeMapItems.
  • TimeMapItem: A TimeMapItem has references to a placemark (on the map) and an event (on the timeline). Calling methods on the item allows it to control the placemark and event so they work in sync.

This tiered structure of references means we can set functions or event listeners on one object that make things happen in another - e.g. hiding placemarks on the map when their associated event scrolls out of view on the timeline, or opening a map info window when the corresponding timeline item is clicked. It also means that you can set cascading options on the whole TimeMap, a single dataset, or a single item - for example, you can set a theme on a dataset so that all its items display the same way.

The other big thing the library does is handle initialization. The timemapInit() function lets you create your TimeMap and load your data in a single function call, setting all the parameters in JSON. To make this really flexible, it supports a bunch of pluggable function hooks. For example, there's a default openInfoWindow() function called when you click the placemark or the event - but you can write your own function (e.g. to use ExtInfoWindow) and set it on a per-dataset or per-item basis.

TimeMap in Action:

The library includes a lot of helper functions to help you set up your own TimeMap. You can load data as inline JSON, remote JSON, or KML (with TimeStamp and TimeSpan elements). Click the screenshots below for examples of each of those:

If all this piques your interest, check out the BasicUsage wiki, svn checkout the code, and get started making your own TimeMap. Happy coding!


You know what's awesome about open-source code written in one language? It's fairly easy to port it over to a similar language, and suddenly it's useful for a completely new audience. That's what's happening in our open-source JavaScript/AS3 Maps API utility libraries, and I'm loving it. Check out the most recent ports:

DragZoomControl: This custom control lets user drag a rectangle on the map to zoom in to just that area, and it's one of my personal favorite ways of drilling down on a map (particularly since I'm usually on a laptop, without a scroll-wheel mouse). The port comes courtesy of developer Brian Richardson. Check out the demo or the reference.
MarkerTracker: This class lets you assign "trackers" to markers, so that when a marker moves out of the visible viewport, a ghost marker and arrow points in the direction of the tracked marker. For maps where there's one very important marker/POI, it's a great way of showing the user how to get back to the original marker. This port comes courtesy of developer Michael Menzel. Check out the demo or reference.
KMLParser: The KML parsing classes, which were a minimal port of the C++ libkml library, now have support for KML styles. This enhancement comes from developer Cecil Reid. Check out the demo or reference.

Thanks to all the developers helping to grow the library! If you're a developer with some code to contribute, just follow the steps in the wiki to get involved.


Recently, we released three new resources for KML and the Google Earth API:

  • Roman Nurik released a new article summarizing the use of KML in the Earth API.
  • Roman also released a embedded KML gadget for embedding a KML file into your web page or into your iGoogle.
  • We released libkml version 0.6. New in 0.6 is:
    • KmlStream streamed parsing, which allows you to parse through very large KML files
    • Support for KML's <Update> element
    • KmlFile now allows DOM import, which allows you to import one DOM into an existing KmlFile DOM
    And a number of other features. Check out the release section for the full list of new features.
  • I released a new article on Converting Geotagged Photos to KML PhotoOverlays. So get out those GPS-enabled phones and get to work!


The Geo and the Google Web Toolkit teams are pleased to announce the public release of the Maps API library for Google Web Toolkit. Google Web Toolkit (GWT) provides a framework for writing web applications using the Java language. The Maps API library for GWT provides Java classes which are designed to provide a familiar paradigm for Java users to access the Google Maps JavaScript API.

 // Open a map centered on the equator/prime meridian
 map = new MapWidget(LatLng.newInstance(0, 0), 2);
 map.setSize("100%", "100%");

 // Add some controls
 map.addControl(new SmallMapControl());
 map.addControl(new SearchControl());

The GWT compiler translates your Java code into JavaScript for deployment to end users. No Java runtime is needed in the browser.

Using the library, you can freely mix Maps into a GWT application, or you can add GWT Widgets in with Map constructs, like Controls and InfoWindows. The demo below combines the DecoratorPanel, StackPanel, and SuggestBox widgets with a Map widget that uses Markers, Directions, Geocoding, and Geodesic Polylines.

There is online documentation, samples, tutorials, and a support forum.

The library has been released previously in milestone and release candidate forms, and it supports most Maps features up to version 2.113. We would like to thank the hundreds of developers that have tried the library and provided feedback.