CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Arnaud Huc
Arnaud Huc

Reputation: 35

Add multiple event listener on google map API v3 AND MarkerWithLabel

I want to add, for each of my markers, an event on click to center on this one. I use the lib "MarkerWithLabel" and when I click on a marker, the map is zooming on the last marker each time.

Here is my code : 

var map         = new google.maps.Map(document.getElementById('map-canvas')),
        bounds      = new google.maps.LatLngBounds(),
        marker      = [],
        grafxUrl    = $('#map-canvas').data('grafx'),
        image       = {
            url : grafxUrl + 'universal/icons/pin_locator.png',
            size: new google.maps.Size(24, 31),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(12, 31)
        };

for (var i = 0; i < response.length; i++) {
        marker = new MarkerWithLabel({
            position: new google.maps.LatLng(response[i].fLatitude, response[i].fLongitude),
            map: map,
            icon : image ,
            title : (i+1)+' '+response[i].sName,
            labelContent: (i+1),
            labelAnchor: new google.maps.Point(3, 25),
            labelClass: "markerNum", // the CSS class for the label
        });
        google.maps.event.addListener(marker, 'click', function() {
            map.setZoom(15);
            map.setCenter(marker.position);
        });
        bounds.extend(marker.position);
        //now fit the map to the newly inclusive bounds
        map.fitBounds(bounds);
    }

What is wrong with my script ?

Thanks a lot.

Upvotes: 2

Views: 2360

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22490

Here is a complete example on how to extend a bounds object to display all markers on the map.

function initialize() {

    var southWest = new google.maps.LatLng(40.744656, -74.005966);
    var northEast = new google.maps.LatLng(34.052234, -118.243685);
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();

    var map = new google.maps.Map(document.getElementById("map-canvas"), {
        zoom: 12,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Create the bounds object
    var bounds = new google.maps.LatLngBounds();

    // Create random markers
    for (var i = 0; i < 100; i++) {

        // Calculate a random position
        var position = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());

        var marker = new google.maps.Marker({
            position: position,
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                map.setZoom(5);
                map.setCenter(marker.position);
            }
        })(marker, i));

        // Extend the bounds with the last marker position
        bounds.extend(position);
    }

    // Fit map to the extended bounds    
    map.fitBounds(bounds);
}

initialize();

This creates 100 random markers within the defined bounds (southWest / northEast coords) then extends a bounds object and finally fit the map to this bounds object. See how the marker variable is defined (within the for loop) and how the fitBounds() is called (outside the for loop). The same should apply to your code.

Below is a working demo. Hope this helps!

JSFiddle demo

Upvotes: 1

Related Questions