Google Maps + Yahoo UI Lib (YUI) = Mashup fun

I am not a front-end engineer. When I designed findmyghar.com I spent a lot of time getting the UI right. What looked beautiful on one browser was horrible on another. And the same user interface looked totally different in different display resolutions. Eventually, I had to rewrite the entire User Interface (yes, I write HTML manually :-) so that it worked properly on the most popular browsers and display settings.

Ever since, I have been hunting to find a better solution to the user interface problem - cause I never thought that writing HTML was such a pain. And that's how I discovered the Yahoo UI Library (YUI) project. I was, and still am, a little surprised because I didn't really think Yahoo cared much for the developer/hacker crowd. I thought they were just busy making money :-) Apparently, I was mistaken. Or perhaps things have changed. Whatever it might be, looks like they have a pretty good developer strategy now.

The first question I had in mind when I checked out YUI was: "Can it work with Google Maps ?" After mucking around a little bit, I have figured out that it is possible. Couldn't find too many examples, so I am posting a simple one here.

You can download the attached simple.html (I have zipped it up). All you need to do is to replace [YOUR GOOGLE KEY] with your Google key and host the page. You will actually see something like this:




The code is self explanatory. You define a div called "map". You then create a Google map in the div:

map = new GMap2(document.getElementById("map"));


You also create a Yahoo context menu on the same div:

oMenu = new YAHOO.widget.ContextMenu("basicmenu", { trigger: "map" });


Now, right-clicking on the google map will invoke the Yahoo context menu widget. And every menu item has javascript that invokes the map.

There you go. Have fun !