开发者

How do I pass google map objects to members in a jQuery namespace?

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:

  1. Only create a new Map if there isn't one in the selected element.
  2. Allow chaining on any existing Map.
  3. 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜