[jQuery] Little help please?

[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);
$("#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.