google maps v3 zoom_changed event does not fire when zoom changes

Question

I have a v3 Google map being loaded exactly as I expect and the marker does what I intend. However when I change the zoom, the zoom_changed event that I have added does not appear to fire. Would anyone be able to shed any light on why? My code is below.

function map_initialise() {
    var mapCentre = new google.maps.LatLng(53.75, -1.50);
    var mapOptions = {
        zoom: 6,
        center: mapCentre,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var latlong1 = new google.maps.LatLng(52.456550,1.680182);
    var windowtext1 = 'Some text';
    var popup1 = new google.maps.InfoWindow({
        content: windowtext1
    });
    var marker1 = new google.maps.Marker({
        position: latlong1,
        title: "Some text"
    });
    google.maps.event.addListener(marker1, 'click', function() { 
        popup1.open(map,marker1);
    });
    marker1.setMap(map);
}

google.maps.event.addDomListener(window, 'load', map_initialise);

google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(reCentre, 3000);
});

function reCentre() {
    var newcentre = new google.maps.LatLng(53.000,0.000);
    map.panTo(newcentre);
}

Answer 1

2 things...

1. Right now your zoom_changed listener isn't being added becuase it's called before the map is initialized. Javascript executes the map_initialise() function then immediately tries and add the listener before the map is finished loading. So put the addListener into the initialize function at the end.

2. Your map variable is private to the map_initialise() function so when reCentre() is called it can't see your map object. If you remove var from in front of map it will become global and reCentre() will be able to see it. I recommend adding var map; above the map_initialise() function so readers of the code will see map is global.