I have just spent the last two days working on our UI framework here at Pollenizer. One thing that seems to come up a lot is the need for googlemap widgets. Here at Pollenizer our philosophy is to get product out into the marketplace as quickly as possible. So, as a UI developer I’m always looking for ways in which to re-use my code. The obvious solution for me is to turn my widgets into jQuery plugins, and so this is exactly what I have done for the googlemaps API.
I want to be able to place a basic googlemap on any page with just one line of code. I also want to be able to configure the map in a number of different ways. Of course, I don’t want to cover to entire API, just the stuff that I’m going to use most of the time. Here then is an explanation of what I have done.
Easy to use:
You just need to call the plugin (like any other) – #(element).MapMe({options:list});. And that’s it! No more pain for the devs. Of course there are a number of parameters you can pass it. Here’s a look at some of them:
- mapCanvas : ‘mapPane’ – the ID of the map HTML object
- mapCenter : [80, 80] – co-ords of the center. the option “current” will use geolocation data of the user if its avaliable
- pinCenter : true – will add a pin to the center of the map
- markerCluster : false – allows you to turn on the markerCluster library for easy pin management. You can also pass in custom pins styles for this library too.
- markers : [] – an array of pins that you may want to place onto the map
- customPins : {} – you can define custom pins here, and declare them in your pin object
- MapOptions : {} – I have set up some default map options, but they can be overwritten by this option
As per usual with my jQuery plugin series, I am hosting it on Github, and you can view the demo page here. Have fun with googlemaps – loving v3 API!
Trackbacks/Pingbacks