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!
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:
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.
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:
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:
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.
Give us feedback in our Product Forums.
Follow