CODEWITHSUNDEEP
javascriptgoogle-maps
Yohann Daniel Carter
Yohann Daniel Carter

Reputation: 975

Google maps reference marker listener

I want to add a listener on each marker to zoom on it.

        var markers = [
            ['SIÈGE SOCIAL - CENTRE DE SOPHIA ANTIPOLIS', 43.582079, 7.051295],
            ['CENTRE DE PARIS', 48.788109, 2.319764],
            ['CENTRE DE RENNES', 48.152474, -1.698386],
            ['CENTRE DE NANTES', 47.215383, -1.53688],
            ['CENTRE DE GRENOBLE', 45.192752, 5.712405],
            ['CENTRE DE LYON', 45.768857, 4.864911],
            ['CENTRE DE AIX-EN-PROVENCE', 43.496824, 5.346391],
            ['CENTRE DE TOULOUSE', 43.56867, 1.387412]
        ];

        for (i = 0; i < markers.length; i++) {

            var marker = new google.maps.Marker({
                position: {lat: markers[i][1], lng: markers[i][2]},
                title: markers[i][0],
                map: map
            });


            marker.addListener('click', function() {
                map.setZoom(8);
                map.setCenter(marker.getPosition());

            });


        }

But whatever the marker clicked, the map is centered on the last marker position.

['CENTRE DE TOULOUSE', 43.56867, 1.387412]

Upvotes: 1

Views: 395

Answers (3)

geocodezip
geocodezip

Reputation: 161334

Simplest solution is to use this inside the marker click event listener function, that refers to the marker that was clicked on.

marker.addListener('click', function() {
  map.setZoom(8);
  map.setCenter(this.getPosition());
});

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
      position: {
        lat: markers[i][1],
        lng: markers[i][2]
      },
      title: markers[i][0],
      map: map
    });
    bounds.extend(marker.getPosition());
    marker.addListener('click', function() {
      map.setZoom(8);
      map.setCenter(this.getPosition());
    });
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var markers = [
  ['SIÈGE SOCIAL - CENTRE DE SOPHIA ANTIPOLIS', 43.582079, 7.051295],
  ['CENTRE DE PARIS', 48.788109, 2.319764],
  ['CENTRE DE RENNES', 48.152474, -1.698386],
  ['CENTRE DE NANTES', 47.215383, -1.53688],
  ['CENTRE DE GRENOBLE', 45.192752, 5.712405],
  ['CENTRE DE LYON', 45.768857, 4.864911],
  ['CENTRE DE AIX-EN-PROVENCE', 43.496824, 5.346391],
  ['CENTRE DE TOULOUSE', 43.56867, 1.387412]
];
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Upvotes: 2

Juan Salamanca
Juan Salamanca

Reputation: 354

try this create a function like a class when you can create new markers 

var arrayMarkers = [];

var markers = [
            ['SIÈGE SOCIAL - CENTRE DE SOPHIA ANTIPOLIS', 43.582079, 7.051295],
            ['CENTRE DE PARIS', 48.788109, 2.319764],
            ['CENTRE DE RENNES', 48.152474, -1.698386],
            ['CENTRE DE NANTES', 47.215383, -1.53688],
            ['CENTRE DE GRENOBLE', 45.192752, 5.712405],
            ['CENTRE DE LYON', 45.768857, 4.864911],
            ['CENTRE DE AIX-EN-PROVENCE', 43.496824, 5.346391],
            ['CENTRE DE TOULOUSE', 43.56867, 1.387412]
        ];

for(var i in markers) {
   var m = new MarkerC();
   m.create(map, markers[i][1], markers[i][2], markers[i][0]);
   arrayMarkers.push(m); 
}

function MarkerC(){
    this.marker;

    this.create = function (map, lat, lng, title){
        this.marker = new google.maps.Marker({
            position : {
                lat : Number(lat),
                lng : Number(lng)
            },
            map: map,
            title: title
          });

        google.maps.event.addListener(this.marker, "click", function(e) {
            map.setZoom(8);
            map.setCenter(this.marker.getPosition());

        });
    }

}

Upvotes: 0

Dr. Roggia
Dr. Roggia

Reputation: 1125

Instead of using map.setCenter(marker.getPosition()); try to use map.setCenter(data.getPosition()); to get the element you clicked

Upvotes: 1

Related Questions