google map api v3 , getBound(); doesn't returns the lat/lng bounds of the current viewport

Question

I need to make an upgrade on the code of my mashup page from google map api v2 to v3. But the getBound() doesn't work with the new code! where is the mistake? thank you in advace.

The old code was :

   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key= (my key api)"
      type="text/javascript"></script>

    <script type="text/javascript">

    function updateStatus() {
      var div = document.getElementById('mapinfo');
      div.innerHTML = map.getBounds();

      document.forms[0].lat0.value = map.getBounds().getSouthWest().lat();
      document.forms[0].lon0.value = map.getBounds().getSouthWest().lng();
      document.forms[0].lat1.value = map.getBounds().getNorthEast().lat();
      document.forms[0].lon1.value = map.getBounds().getNorthEast().lng();

      get_pictures();

    }

    function onMapMove() {
      //map.setCenter(map.getCenter());
      updateStatus();
    }

    function onMapZoom(oldZoom, newZoom) {
      //map.setCenter(map.getCenter(),newZoom)
      updateStatus();
    }


    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        window.map = map
        map.setCenter(new GLatLng(41.879786443521795,12.427597045898438), 6);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        window.kh = new GKeyboardHandler(map);

        GEvent.addListener(map,'moveend',onMapMove);
        GEvent.addListener(map,'zoomend',onMapZoom);
        updateStatus();
      }
    }

    </script>

new code:

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key= (my api key)"
      type="text/javascript"></script>

       <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

      <script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?libraries=weather&sensor=true">
</script>

    <script type="text/javascript">

    function updateStatus() {
      var div = document.getElementById('mapinfo');
      div.innerHTML = map.getBounds();

      document.forms[0].lat0.value = map.getBounds().getSouthWest().lat();
      document.forms[0].lon0.value = map.getBounds().getSouthWest().lng();
      document.forms[0].lat1.value = map.getBounds().getNorthEast().lat();
      document.forms[0].lon1.value = map.getBounds().getNorthEast().lng();

      get_pictures();

    }

    function onMapMove() {
      //map.setCenter(map.getCenter());
      updateStatus();
    }

    function onMapZoom(oldZoom, newZoom) {
      //map.setCenter(map.getCenter(),newZoom)
      updateStatus();
    }

    function load() {
      if (GBrowserIsCompatible()) {

        var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(41.879786443521795,12.427597045898438),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
        });
        weatherLayer.setMap(map);

        var cloudLayer = new google.maps.weather.CloudLayer();
        cloudLayer.setMap(map);

        updateStatus();
      }
    }

    </script>

Answer 1

• v3 does not include GBrowserIsCompatible.
• You should not be including both versions of the API on the same page unless you know what you are doing.

• map.getBounds() will not return a valid value until the bounds_changed event has fired. You probably want to run the updateStatus function inside an event listener for bounds_changed.

  google.maps.event.addListener(map, 'bounds_changed', updateStatus });

Answer 2

The reason your not getting anything returned from the getBounds() call is because your map variable is not in the global scope. Try declaring your map variable outside your functions and it should work - because there is nothing wrong with your getBounds() declaration.

So something like...

var map;    //declaring map variable globally

function updateStatus() {
//code..  
}

function onMapMove() {
//code..  
}

function onMapZoom(oldZoom, newZoom) {
//code..
}

function load() {

    //using the global variable
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

Answer 3

currently the map is only accessible inside initialize, make it globally accessible:

window.map = new google.maps.Map(/*.....*/);

Furthermore: getBounds() cannot return an result before the map has finished loading(the map loads asynchronously, therefore you can't call updateStatus() immediately).

You may observe the tilesloaded-event:

google.maps.event.addListenerOnce(map,'tilesloaded',updateStatus);

But as it appears that you also want to observe zooming and panning, you can observe all at once:

google.maps.event.addListener(map,'bounds_changed',updateStatus);