[jQuery] Little help please?

[jQuery] Little help please?


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);
$("#map2").googlemap(37.4419, -122.1419, 10);
$("button").click(function(){
$("#map").pan(37.3, -122.2, 0);
$("#map2").infoWindow(37.4419, -122.1419, "Hello");
});
<div id="map" style="width: 500px; height: 300px"></div>
<div id="map2" style="width: 500px; height: 300px"></div>
The pan and infoWindow only act on the last <div>. I'm sure this is
only because of a rookie javascript mistake, any help is much
appreciated.
Many thanks,
Kris.