Not every piece of JavaScript code should be a jQuery plugin. This is a
great example of code where making it plugin gains you nothing and adds
significant complexity.
jQuery is not a general purpose JavaScript library. jQuery is tightly
focused on one thing: DOM manipulation. And that's not what you're doing
here, at all. You're trying to provide a simpler wrapper around the Google
Maps API.
The problem you've run into is that the Maps API has a piece of state of its
own that you must keep track of, the GMap2 object. As you know, each time
you call new GMap2(element) you get a new GMap2 object for that specific
map.
Currently you're storing that object in a *global variable* named 'map'.
That's why a single map works but multiple maps don't - you're overwriting
that global variable with each one.
You could change your map = new GMap2(this); to var map = new
GMap2(this); to make it a local variable, but then it would be local to
your googlemap() method. The other methods wouldn't have access to it.
You could store it in an expando property of the DOM object (this), but that
is not recommended. If you do it you need to be sure to null out the
property before leaving/reloading the page or before deleting the map
element, to avoid memory leaks.
Maybe better, you could use jQuery's .data() method to store the map object,
something like this:
jQuery.fn.extend({
googlemap : function(lat,lng,zoom) {
return this.each(function(){
if (GBrowserIsCompatible()) {
var map = new GMap2(this);
$(this).data( 'googlemap', map );
map.setCenter(new GLatLng(lat, lng), zoom);
}
});
},
pan : function(lat,lng, delay) {
return this.each(function(){
window.setTimeout(function() {
var map = $(this).data( 'googlemap' );
map.panTo(new GLatLng(lat,lng));
}, delay);
});
},
infoWindow : function(lat,lng, nodeText) {
return this.each(function(){
var map = $(this).data( 'googlemap' );
map.openInfoWindow(
new GLatLng(lat,lng),
document.createTextNode(nodeText)
);
});
}
});
But this is getting awfully messy.
Instead, why not use a simple JavaScript object?
function GoogleMap( id, lat,lng,zoom ) {
if( ! GBrowserIsCompatible() ) return {};
var element = $('#'+id)[0];
var map = new GMap2( element );
map.setCenter( new GLatLng(lat,lng), zoom );
return {
ok: true,
pan: function( lat, lng, delay ) {
setTimeout( function() {
map.panTo( new GLatLng(lat,lng) );
}, delay );
},
infoWindow: function( lat, lng, nodeText ) {
map.openInfoWindow(
new GLatLng(lat,lng),
document.createTextNode(nodeText)
);
}
}
}
And you would call it like this:
var map1 = new GoogleMap( 'map', 37.4419, -122.1419, 10 );
var map2 = new GoogleMap( 'map2', 37.4419, -122.1419, 10 );
$('button').click(function(){
map1.pan(37.3, -122.2, 0);
map2.infoWindow(37.4419, -122.1419, 'Hello');
});
As you can see, that's much simpler to implement and just as easy to use.
-Mike
From: Kris
Hi Guys,
I'm playing around with writing plugins. To learn I decided
to write a plugin which interfaces with Google Maps. My code
is as follows:
jQuery.fn.extend({
googlemap : function(lat,lng,zoom) {
return this.each(function(){
if (GBrowserIsCompatible()) {
map = new GMap2(this);
map.setCenter(new
GLatLng(lat, lng), zoom);
}
});
},
pan : function(lat,lng, delay) {
return this.each(function(){
window.setTimeout(function() {
map.panTo(new GLatLng(lat,lng));
}, delay);
});
},
infoWindow : function(lat,lng, nodeText) {
return this.each(function(){
map.openInfoWindow(new
GLatLng(lat,lng), document.createTextNode (nodeText));
});
}
});
Now, this all works wonderfully if I only have one map per page, like
so:
$(#map).googlemap(37.4419, -122.1419, 10);
$(button).click(function(){
$(#map).pan(37.3, -122.2, 0);
$(#map).infoWindow(37.4419, -122.1419, Hello);
});
div id=map style=width: 500px; height: 300px/div
However, if I have more than one map, like so:
$(#map).googlemap(37.4419, -122.1419, 10);
