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.