I just finished putting together a Google Mapplet that helps you discover things to do while you are using Google Maps.
Mapplets are a new feature that let you add Zvents event search and all sorts of other information to Google Maps itself, combining them in any way you want. Google is fixing a few remaining bugs in their mapplet code, so right now mapplets are available only on a developer preview page. We’ll have an official announcement when Google releases Mapplets on the main Google Maps page.
In the meantime, you are welcome to try out our Zvents mapplet, if you don’t mind the odd bug or two. You can install the mapplet by clicking the Add it to Maps button on this page, then click Discover things to do – Zvents under the Mapplets tab on the Google Maps page. I think it’s a lot of fun, and I hope you do too. We’d like to hear your feedback!
The rest of this post is for my fellow Google Mapplet developers. If you’ve worked with both the regular Google Maps API and the Mapplet API, you know that there’s one big difference between the two: many of the Maps API functions are replaced with special asynchronous versions. Because of the way mapplets work, it isn’t possible for an API function to return a value directly to its caller. Instead, you must provide a callback function which receives the value. For example, this Maps API code:
var center = map.getCenter();
// do something with the map center here
must be replaced with:
map.getCenterAsync( function( center ) {
// do something with the map center here
});
This type of asynchronous callback should be familiar to any AJAX developer.
The problem starts when you need several pieces of information at once. To find events on the part of the map you are looking at, our mapplet uses the map boundaries and center along with the map size in pixels. My first attempt at the code looked like this:
map.getSizeAsync( function( size ) {
map.getBoundsAsync( function( bounds ) {
map.getCenterAsync( function( center ) {
// Run a search using size, bounds, and center
});
});
});
That works fine, but it is rather slow. The code first asks for the pixel size and waits for it, then asks for the geographical boundaries and waits for them, then asks for the center and waits for it. That’s a lot of waiting around! And it gets that much worse if you need even more information from the map.
It would speed things up if there were a way to combine all of those asynchronous requests into one. What if the mapplet API worked like this:
GAsync( map, 'getSize', 'getBounds', 'getCenter',
function( size, bounds, center ) {
// Run a search using size, bounds, and center
});
This GAsync() function would gather up all three pieces of map information and return them in a single callback. The code is simpler and easier to read too.
Interestingly enough, it turns out to be possible to implement GAsync() as a small layer on top of the existing Mapplet API functions and gain these benefits. I did just that, and it really improved the responsiveness of our mapplet.
When I told the Google Mapplet team about this, they liked the idea too, and they will include GAsync() in the next version of the mapplet API.
If you’re already working on a mapplet, you don’t have to wait. You can use GAsync() right now by including its source code directly in your mapplet. It’s a small function that you can paste into your code, making your mapplet code easier to write and faster too.
Full details and the GAsync() source code are in my blog post.
If you enjoyed this post, make sure you subscribe to my RSS feed!
