I am spinning my tires while beginning to build a jQuery plugin for Google Maps v3. I have read through: "A Plugin Development Pattern", Plugins/Authoring, and looked over a number of plugins for v2, but I am stuck on how to properly initialize the map, so that I can meet these three objectives:
- Only create a new Map if there isn't one in the selected element.
- Allow chaining on any existing Map.
- Have the methods callable on the object (e.g.
$.gmap.method()
instead of$.gmap('method')
).
Apologies if this is poorly phrased, but basically I want a wrapper around the Map object, so that I can build out Google Maps with similar data much more quickly.
Here is what I've got so far:
(function ($) {
$.fn.gmap = func开发者_如何学运维tion(options) {
var opts = $.extend({}, $.fn.gmap.defaults, options);
return this.each(function(){
$gmap = new google.maps.Map(this, opts);
return $gmap;
});
};
$.fn.gmap.go = function(){
return this.setCenter(new google.maps.LatLng(10,10));
};
$.fn.gmap.defaults = {
zoom: 2,
center: new google.maps.LatLng(0,0),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
})(jQuery);
$('map_canvas').gmap();
Sorry, I know it's not very far along, but basically if someone can just nudge me over the edge where a call to $('map_canvas').gmap().go()
or $('map_canvas').gmap.go()
tries to call Map.setCenter()
and does not create a new instance, then I can work through the rest.
P.S. if anyone has already written a plugin like this, pointing that out would be even better.
P.S.S. I have already ordered jQuery Plugin Development Beginner's Guide, but I really would rather get started on this before it's delivered. Other suggested reading is more than welcome.
Thanks for any help.
I finally figured this out. Essentially, the following does exactly what I was looking for:
(function($) {
var methods = {
init : function( options ) {
var output;
this.each(function(){
var $this = $(this),
data = $this.data('gmap');
var settings = {
center: new google.maps.LatLng(0,0),
zoom : 2,
mapType: "terrain",
};
if ( ! data ) {
if ( options ) {
$.extend( settings, options );
}
$(this).data('gmap', new google.maps.Map(
$this.get(0),
{
center: settings.center,
zoom: settings.zoom,
mapTypeId: settings.mapType
})
);
}
});
return this;
}
};
$.fn.gmap = function( method ) {
this.go = function(lat,lng){
$this = this;
this.each(function(){
$(this).data('gmap').setCenter(
new google.maps.LatLng(lat,lng)
);
});
return $this;
}
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.gmap' );
}
};})(jQuery);
I then use the methods like so:
Put map(s) onto the DOM: $('.map_containers').gmap().css({border: '1px solid orange'}); //css to demonstrate chaining.
Set a different center: $('.map_containers').gmap().go(50,50);
Hope this helps someone.
精彩评论