I am trying to add markers via Json once a visitor moves the map. For some reason the moveend is not caught and / or the function onClickCallback is not triggered. Where am I going wrong here.

 google.maps.event.addListener(map, "moveend", function() {
  var bounds = this.getBounds();
  onClickCallback(map);

 });


function onClickCallback(map) {

var bounds = map.getBounds();


  // clearOverlays();



    $.getJSON( '.php', {
        swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(), 
        neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()}, function(data) { 
        $.each( data.markers, function(i, marker) {


        // Define Marker properties
        var image = new google.maps.MarkerImage(marker.smallimg,
        // This marker is 129 pixels wide by 42 pixels tall.
            new google.maps.Size(42, 42),
        // The origin for this image is 0,0.
            new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 18,42.
            new google.maps.Point(18, 42)
        );


            $('#map').gmap('addMarker', { 'id' : marker.id,
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'icon' : image,             
                'bounds': true 
            }).click(function() {
                $('#map').gmap('openInfoWindow', { 'content': '<h2>' + marker.loc + '</h2><img src="' + marker.smallimg + '" class="my-map-marker" />'
                 }, this);
            });
        });
    });




}   


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

I am trying to add markers via Json once a visitor moves the map. For some reason the moveend is not caught and / or the function onClickCallback is not triggered. Where am I going wrong here.

 google.maps.event.addListener(map, "moveend", function() {
  var bounds = this.getBounds();
  onClickCallback(map);

 });


function onClickCallback(map) {

var bounds = map.getBounds();


  // clearOverlays();



    $.getJSON( 'http://skiweather.eu/gmap4/markers/index.php', {
        swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(), 
        neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()}, function(data) { 
        $.each( data.markers, function(i, marker) {


        // Define Marker properties
        var image = new google.maps.MarkerImage(marker.smallimg,
        // This marker is 129 pixels wide by 42 pixels tall.
            new google.maps.Size(42, 42),
        // The origin for this image is 0,0.
            new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 18,42.
            new google.maps.Point(18, 42)
        );


            $('#map').gmap('addMarker', { 'id' : marker.id,
                'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                'icon' : image,             
                'bounds': true 
            }).click(function() {
                $('#map').gmap('openInfoWindow', { 'content': '<h2>' + marker.loc + '</h2><img src="' + marker.smallimg + '" class="my-map-marker" />'
                 }, this);
            });
        });
    });




}   


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

• javascript
• google-maps
• google-maps-api-3

3 Answers 3

The moveend event is no longer available in google.maps V3, use dragend instead.

Try this:

google.maps.event.addListener(map, "dragend", function() {
    var bounds = this.getBounds();
    onClickCallback(map);

});

I have the same question.

I found the answer in google reference;

Event: idle

Arguments: None

This event is fired when the map bees idle after panning or zooming.

From one post at groops google.

google.maps V3 is missing some important V2 events on the whole map:

mousemove 
mouseover 
mouseout 
movebegin 
moveend 

It seems bounds_changed could help. See also ment from user sabotero about dragend.