RokBox-ify Google Maps

Something I really never thought about, since we never had the necessity for it and there never been any requests for it, is the Google Maps support on RokBox.

Just recently I saw a thread in the RokBox Support Forum about some guys throwing out plenty of tricks to have Google Maps working on RokBox. I have to admit I really liked that thread, the tricks discussed were excellent and it goes to demonstrate how flexible RokBox is, and how it can solve almost any possible need.

The more I was reading the thread and thinking about this Goole Maps in RokBox mashup, I started hearing a bell ringing in my head.

I already knew RokBox was very flexible and dynamic but I couldn't explain why Google Maps couldn't be embedded in a easier way at the point that so many guys were pointing out many different tricks to accomplish it. I then decided to do some tests on my own starting from the very basic.

The first thing I did was to try the classical RokBox syntax:

{rokbox text=|Google Maps Test| size=|640 480|}http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1600+Pennsylvania+Ave+NW,+Washington,+DC&sll=38.89766,-77.036564&sspn=0.026553,0.047636&ie=UTF8&z=17&iwloc=A{/rokbox}

Of course it didn't work, or better, it worked but it embedded the whole Google Maps page instead of just the map. I wasn't doubting the guys in the thread didn't already try it, I just wanted a start to go from. And in fact it was helpful!

What's nice about Google is that all their API and URLs are always RICH of options that you can specify, 99% of the cases what you're looking for is just a matter of passing the right query and you're done. Searched the amount of 2 minutes to realize that output parameter options was exactly what we needed. You just have to append to your Google Maps URL string the parameter &output=embed and that is really all.

I will show step by step what I did in order to have Google Maps working in RokBox:

1. Go to http://maps.google.com
2. Search for any location you want to embed, what I used for the example was: 1600 Pennsylvania Ave NW, Washington, DC
3. Once the search is completed, click on Link tab and copy the normal link.
   
   
   
4. Go back to Joomla! and as content write the simply and well known RokBox syntax putting as link what we have copied from Google Maps PLUS the magic &output=embed:

   {rokbox size=|640 480| text=|White House|}http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1600+Pennsylvania+Ave+NW,+Washington,+DC&sll=38.89766,-77.036564&sspn=0.026553,0.047636&ie=UTF8&z=17&iwloc=A&output=embed{/rokbox}
   

5. Save and see!

Here is what we will get.



I really was amazed on how simple and easy it was. The feature was just in and we didn't even know.