Fuel Price Mapplet: Developing Mapplets vs Mashups

About a week ago Google opened Mapplets to everyone, and now, the WA Petrol Map Mashup is available as a Google Maps Mapplet! Find the cheapest petrol stations while you're getting directions and searching for businesses. Bookmark your commute for easy reference and use waypoints to take a detour to the nearest, cheapest petrol.

Mapplets are found in the 'My Maps' tab on Google Maps when you're signed in to Google. You can overlay multiple Mapplets giving you the power to create a customized Google Maps interface with useful information overlaid over your normal map search results, directions, and business listings.

In Part 1 I'll show you how to use the Petrol Price Mapplet to find the best place to refuel on your commute, developers might want to skip straight to Part 2 where I continue from last week's post on creating a mashup with GME and Pipes, and describe the simple process of creating a mapplet using Yahoo Pipes as a geocoded KML data source.

Part 1: Still in Perth? Still Want Cheap Petrol?

What's better than a mashup with the best petrol prices in your usual suburbs? A mapplet! See where the best petrol prices are on your commute -- and get directions to include the cheapest station on the way.

Login to Google Maps, then add the mapplet using the gallery (or 'add by url' with this url). When it's on your list of mapplets check the checkbox to enable it. You should see something like the image below.

Click 'Change Settings' and chose three suburbs where you normally fill up. When you save your changes, you should see the markers move to show you the cheapest 15 locations from those three suburbs. Clicking a marker will show you the price at that station plus the cheapest overall price.

Now click 'Search Results' and choose the 'directions' tab (under the search box). Enter your home address in one box and your work address in the other and search. You should now see you morning commute with the cheapest petrol stations overlaid on top.




Your commute probably isn't quite right (mine isn't). I have to click 'avoid highways' as I never travel the freeway in rush-hour, then I left-click drag my route from Harbourne over to Pearson -- Google Maps recalculates my journey in real time. I want to check this whenever I need to refuel, so I click 'link to this page' and copy the result from the popup box and paste it back into the address bar; then I bookmark it 'My Daily Commute'. Now whenever I need petrol I just open that link, enable the 'WA Petrol Mapplet' and I can see where to fill up.

Today I see that the station on my way is 14c/l more expensive than the cheapest. Knowing the cheapest isn't far out of my way, I right click the map next to the Karrinyup Caltex and choose 'Add to journey' and move it up the list on the left. Google revises the journey (it's less than 10mins out of my way) and I save 14c/l on filling up.

Part 2: How to Make a Mapplet in Under 2 Hours -- and Why?

Mapplets can be even simpler than mashups, but let's start with why you should bother with a mapplet at all, Mapplets:

• give people access to all the Google Maps functionality (traffic view, street view, directions, drag-and-drop re-routing, etc.) out of the box.
• work as part of Google Maps, so people don't have to login to different websites.
• can be 'layered' so your mapplet can be used in conjunction with other people's (traffic congestion + petrol prices + ?)

That's not to say you should abandon your stand-alone mashup. Leverage the mapplet to drive traffic to it:

• The Mapplet interface is limited. The best use case is to 'enable' the mapplet, then switch back to the search results view. Side-effect: Any and all useful information you have, has to be shown in the marker info-windows (or with the marker itself, try and use customised markers if possible). Use the window to say there's more to see at your full site (and provide a handy link!)
• Your ability to save user data in Mapplets is limited. Stand-alone mashups are much better if you're storing more than simple user preferences.
• Keep it simple. Mapplets work best as useful markers that sit on top of a normal map, like a layer in Google Earth. Keep complex interactions and data presentation to standalone mashups. Remember: A mapplet is a side-order to the map, a mashup is a main course.

With keeping it simple in mind, my mapplet source code is about as basic as you could hope for. Mapplets are 90% Javascript (10% XML). There's no editor or built-in hosting (unlike GME -- maybe coming soon?), but there is a 'scratchpad' that you can should use to develop and test your code. When you're done, you can host it in a variety of Google Places -- Groups, Pages, or the GME itself.

Writing the Mapplet

There's three things I want to achieve in my mapplet, I want

• users to be able to enter a few suburbs to look at on the map (arbitrary number -- 3).
• to display the cheapest (arbitrary number -- 15) petrol stations as markers on the map.
• to indicate the overall cheapest petrol available in those selected suburbs.

User Prefs

Mapplets handle user preferences well. Add require feature="setprefs" within the moduleprefs, then add UserPref definitions, one for each preference:

userpref name="SuburbOne" display_name="Suburb 1" default_value="West Perth" datatype="string"

Then you can access these values like this:
var prefs = new _IG_Prefs(__MODULE_ID__);
var s1 = prefs.getString("SuburbOne");

Show the Petrol Stations

I hate doing XML manipulation in JavaScript. Luckily I don't have to. Mapplets let you pass in a GeoRSS or KML file in and it will automatically plot the placemarks on your map. Use the GeoRSS function like this:

var geoXml = new GGeoXml(kmlFileURLString);

map.addOverlay(geoXml);

Now all you need is a pre-manipulated KML link (here's one I prepared earlier). Once again our friend and saviour -- Yahoo Pipes (how is this not a Google product?!), where I do all my XML manipulation.

I create a new pipe, 'combined petrol prices', that takes three user inputs as input to our existing 'Petrol Price by Suburb' pipe, and uses a 'union module' to combine them. The I sort the result by fuel price and truncate it to 15 items. Then I add a 'Location Extractor'* module (which allows you to export your pipe as a KML file) and I'm done. Three inputs (my user prefs), sorted and truncated to 15 cheapest stations, outputted as KML.

Back in the mapplet I write a bit of JavaScript to construct the URL with the user prefs as parameters for the pipe url. Then I pass this URL into the constructor for a GeoRSS overlay and add the overlay to the map. Unfortunately Pipes doesn't give you the ability to hand tinker with the KML output, which means you can't specify a custom marker / placemark icon in the feed. Rather than forgo the simple / handy GeoRSS functionality I'm going to live with the plain blue markers -- mainly because I'm lazy.

*A note on the Location Extractor Pipe module. It's a little… finicky. The best way I've found to have it reliably parse geolocations is to ensure your feed has 'geo:lat' and 'geo:long' fields. You'll know it works when the output from the Location module includes a populated 'y:location' field.

You can test that the Pipes KML feed is working by running it within Pipes itself, you should see your stations on a Yahoo Map. To double check, just paste the Pipe's KML output address into your Google Maps search box and it will magically render it on the map for you.

Always Show the Cheapest Petrol

I still want to append the cheapest available petrol to each station marker's description.

I create another new Pipe and drop the 'combined' Pipe from above into it (hooking up appropriate user inputs so it takes the same parameters). Then I add a 'foreach annotate' module, and use a new instance of the combined pipe as the source. On the dropdown choose 'first only' -- this will add a new node to each item that contains the first item in the source feed (Ie. The cheapest station). Bring out the regex hammer to nail that info onto the bottom of the description field and I'm done. I Don't even have to touch the mapplet code.

That's It?

Upload your Mapplet XML somewhere, then click 'Add Content' and choose 'add by URL' (next to the search button). Paste in your address and you're done. Once you're happy that everything works, you can submit your Mapplet to the gallery for the world to enjoy.

Here's a few tips:

• Track your mapplet use with Google Analytics (here's how).
• Show your user prefs in you mapplet output panel. If you state what the current settings are, there's a better chance that people will change them to something more suitable.
• Like a mashup, make sure the 'default' result on installation shows something useful / interesting. Most people will add --> judge --> remove, well before they start playing with user preferences.
• Keep the overhead low. Don't add 10,000 markers at a time -- people will turn it off very quickly indeed. If you have a lot of data use the Marker Manager, the Panaramio mapplet is a good example of how and when to do this.
• Host it for free. If you don't have a server handy, you can host your mapplet on a number of Google properties.
• All the data fetching (XML/GeoRSS/HTML) routines within mapplets are cached every 30mins. If you need data fresher than that you'll need to increase that refresh rate. Don't if you don't have to, caching is a Good Thing.

Criticisms, Suggestions, and Conclusions

My Maps / Mapplets in Google Maps is seems based on the idea of layers and 'custom placemarks' in Google Earth, and in a lot of cases it makes a lot more sense to show this layered information in the context of your usual Google Maps use, rather than a collection of standalone mashups.

Things like weather, petrol, road congestion, speed camera locations, and panaramio pictures are excellent examples of data I'd like to see on my Google Map all the time, and together -- once we get full Google Maps as an in-car GPS, the world will truly be a brighter place.

That said, here's some things missing from Mapplets that would be nice to see in future releases:

• No hosting or built in web editor. Let us use the Google Mashup Editor to write, host, and test our mapplets.
• You can't assign custom markers to a KML / GeoRSS feed. Makes sense, as you should be able to put the marker definitions into the feed itself -- but what if you can't? Let us specify a default marker setting.
• Selected Mapplets don't persist. Each time I load Google Maps I need to activate the mapplet / my maps I want to overlay. Lets us persist them between sessions (or at least create a link with them included. I *always* want to have certain mapplets turned on, making people turn them on each time makes them less likely to be used.
• Adsense revenue. Please.
• User settings saving is patchy. Using the 'back' button on your browser almost guarantees the user settings are lost.
• …and one for Yahoo Pipes: Let us tinker with the KML output please!