google.maps.event.trigger not triggering after map load

Question

I have a google map that updates all the markers on it upon dragend and zoom_changed events. It's all working except the initial load of the map. After the map has loaded it is empty. At the end of initialize() I call google.maps.event.trigger(map, 'dragend') to try to call the dealWithNewWindow function so the map fills with markers, but nothing happens?

initialize = function() {
  mapOptions = {
    center: { lat: 51, lng: 0 },
    zoom: 9
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.setCenter(new google.maps.LatLng(51,0));
  google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
  google.maps.event.addListener(map, 'dragend', dealWithNewWindow);
  function dealWithNewWindow(event) {
    killAllMarkers();
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng};
    $.ajax({
      type     : 'POST',
      url      : '/maprequest',
      dataType : 'script',
      data     :  {  NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng }
    });
  };
  google.maps.event.trigger(map, 'dragend');
};

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

EDIT:

I've homed in a bit on the problem. After a page refresh the javascript grinds to a halt during this line in dealWithNewWindow: var nelat = bounds.getNorthEast().lat();. For some reason this code runs fine when the map bounds are changed afterwards, but it fails the first time the map is loaded.

I've removed the ruby-on-rails tag because it's not relevant; there isn't a line of Ruby in your question — duncan, Apr 20 '15 at 14:43
I'd move the declaration of `dealWithNewWindow` outside of your `initialize` function — duncan, Apr 20 '15 at 14:45
Good point re rails. I've moved `dealWithNewWindow` outside `initialize`, sadly still not working. — Bazley, Apr 20 '15 at 14:59
I think you have to have an event listener for the map `idle` event, to create the initial bounds object — duncan, Apr 20 '15 at 15:35

duncan · Answer 1 · 2015-04-20T08:11:08.537

The trigger to the map dragend event isn't at the end of your initialize function. It's outside of either the functions. And you have an extraneous }; towards the end of the code.

I'd suggest running it all through JSLint.

Here's the original, with the indentation amended and some comments added to make it more obvious where the functions begin and end:

initialize = function() {
    mapOptions = {
        center: {
            lat: 51,
            lng: 0
        },
        zoom: 9
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map.setCenter(new google.maps.LatLng(51, 0));
} // end of initialize function

// not in any function:
google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
google.maps.event.addListener(map, 'dragend', dealWithNewWindow);

function dealWithNewWindow(event) {
    killAllMarkers();
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {
        NElatitude: nelat,
        SWlatitude: swlat,
        NElongitude: nelng,
        SWlongitude: swlng
    };
    $.ajax({
        type: 'POST',
        url: '/maprequest',
        dataType: 'script',
        data: {
            NElatitude: nelat,
            SWlatitude: swlat,
            NElongitude: nelng,
            SWlongitude: swlng
        }
    });
}; // end of dealWithNewWindow function

// not in any function:
google.maps.event.trigger(map, 'dragend');

};  // erroneous closing };

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

And here's a version with minor amendments that I think should fix your error.

initialize = function() {
    mapOptions = {
        center: {
            lat: 51,
            lng: 0
        },
        zoom: 9
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map.setCenter(new google.maps.LatLng(51, 0));

    google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
    google.maps.event.addListener(map, 'dragend', dealWithNewWindow);

    google.maps.event.trigger(map, 'dragend');
};

function dealWithNewWindow(event) {
    killAllMarkers();
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {
        NElatitude: nelat,
        SWlatitude: swlat,
        NElongitude: nelng,
        SWlongitude: swlng
    };
    $.ajax({
        type: 'POST',
        url: '/maprequest',
        dataType: 'script',
        data: {
            NElatitude: nelat,
            SWlatitude: swlat,
            NElongitude: nelng,
            SWlongitude: swlng
        }
    });
};

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

I'm so sorry, the extraneous `};` actually isn't there in the original code. It appeared in the question because I'd cut a load of irrelevant code from the original. I've edited the question and it is now correct. I've triple-checked it. There are no bracket errors in the original code or in the question. — Bazley, Apr 20 '15 at 14:26

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

Ok, it's something to do with getBounds() not being defined until the tiles have loaded. Salman A's answer here fixes the problem:

google.maps.event.addListenerOnce(map, 'idle', function() {
  google.maps.event.trigger(map, 'dragend');
});

edited May 23 '17 at 11:57

Community

1
1

answered Apr 20 '15 at 15:26

Bazley

2,699
5
36
61

google.maps.event.trigger not triggering after map load

2 Answers2