Google Maps getBounds() returns undefined

Question

I'm writing a code which will:

-- Load a map and center it on a KML

-- Draw a polygon based on the bounds of the map.

Here below the code. I get an error

Uncaught TypeError: Cannot call method 'getNorthEast' of undefined

    function initialize()
{
    var mapOptions =
    {
    zoom: 19,
    mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom
    };

    var KML1 = new google.maps.KmlLayer(
            {
            clickable: false,
            url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan
            });
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    KML1.setMap(map);


    var bounds = new google.maps.LatLngBounds();
    bounds = map.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var QLat = Math.abs((ne.lat()-sw.lat())/5);
    var QLng = Math.abs((sw.lng()-ne.lng())/5);

    var swLat = sw.lat()+QLat;
    var swLng = sw.lng()+QLng;

    var neLat = ne.lat()-QLat;
    var neLng = ne.lng()-QLng;

    ne = new google.maps.LatLng(neLat,neLng);
    sw = new google.maps.LatLng(swLat,swLng);

    var Coords = [
                ne, new google.maps.LatLng(ne.lat(), sw.lng()),
                sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
            ];


    surface = new google.maps.Polygon(
    {
    paths: Coords,
    strokeColor: '#00AAFF',
    strokeOpacity: 0.6,
    strokeWeight: 2,
    fillColor: '#00CC66',
    fillOpacity: 0.15,
    editable: true,
    draggable: true,
    geodesic:true
    });

    surface.setMap(map);
    google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes
    //$("#results").append(coordinates[0]);
  //Let's update area and price as the poly changes
function ciao(event)
{
        var vertices = this.getPath();
        // Iterate over the vertices.
        for (var i =0; i < vertices.getLength(); i++) {
            var xy = vertices.getAt(i);
            Coords = []
            Coords.push(xy);  
            };
}
}

Any Suggestion?

Thanks,

Daniele

Answer 1

You need to put all the code that depends on the map bounds inside the event listener.

    var surface = null;
    function initialize()
    {
      var mapOptions =
        {
          zoom: 19,
          mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom
        };

      var KML1 = new google.maps.KmlLayer(
            {
              clickable: false,
              url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan
            });
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      KML1.setMap(map);

      google.maps.event.addListener(map,'bounds_changed', function() 
      {
        var bounds = new google.maps.LatLngBounds();
        bounds = map.getBounds();
        var ne = bounds.getNorthEast();
        var sw = bounds.getSouthWest();

        var QLat = Math.abs((ne.lat()-sw.lat())/5);
        var QLng = Math.abs((sw.lng()-ne.lng())/5);

        var swLat = sw.lat()+QLat;
        var swLng = sw.lng()+QLng;

        var neLat = ne.lat()-QLat;
        var neLng = ne.lng()-QLng;

        ne = new google.maps.LatLng(neLat,neLng);
        sw = new google.maps.LatLng(swLat,swLng);

        var Coords = [
                ne, new google.maps.LatLng(ne.lat(), sw.lng()),
                sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
            ];


        surface = new google.maps.Polygon(
        {
          paths: Coords,
          strokeColor: '#00AAFF',
          strokeOpacity: 0.6,
          strokeWeight: 2,
          fillColor: '#00CC66',
          fillOpacity: 0.15,
          editable: true,
          draggable: true,
          geodesic:true
        });

        surface.setMap(map);
     }); // end of listener callbck

     google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes
     //$("#results").append(coordinates[0]);
     //Let's update area and price as the poly changes
     function ciao(event)
     {
       var vertices = this.getPath();
       // Iterate over the vertices.
       for (var i =0; i < vertices.getLength(); i++) {
         var xy = vertices.getAt(i);
         Coords = []
         Coords.push(xy);  
       };
     }

   } // end of initialize