Multiple marker content displaying same location

Question

I was trying to display multiple markers with content. This is the code I'm using-

var latitude=[10,20,30];
var longitude=[10,20,30];
var address=["Test1","Test2","Test3"];

function initialize() {
    var mapObject = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapObject);
    loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

function loadMarkers() {
    for (var i = 1; i < latitude.length; i++) {
        var markerCenter = new google.maps.LatLng(latitude[i], longitude[i]);
        var marker = new google.maps.Marker({
            position: markerCenter,
            animation: google.maps.Animation.BOUNCE
        });
        marker.setMap(map);
        marker.info = new google.maps.InfoWindow({
            content: address[i]
        });
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function () {
            marker.info.open(map, marker);
        });
    }
}

The problem is that it's always showing last address of the address array. Can anyone please help me?

In your for loop `latitude.length` doesn't seem to make much sense. Should be something like `markers.length` ... or a collection of lat-lng positions. — Tim Vermaelen, Aug 10 '15 at 10:27
Because functionality wise, `loadMarkers()` needs to loop over your collection of positions. Then each position becomes a marker on the map. — Tim Vermaelen, Aug 10 '15 at 10:31
Exactly. So i have three array which contains the latitude, longitude & address data. Now these latitude & longitude array will form the markers in the map @TimVermaelen — Anurag Chakraborty, Aug 10 '15 at 10:34
Please show us how you come to that collection ... and how you put that collection together as it is the key to your problem. — Tim Vermaelen, Aug 10 '15 at 10:42
possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Aug 10 '15 at 10:43

score 1 · Accepted Answer · answered Aug 10 '15 at 15:04

A few things are missing in your code. Like a starting zoom and center of the map.

But here is the thing: - make 1 infowindow, and use it again and again. - I see you have markers.push(marker); in your code. That's good (maybe you saw one of my other posts). When you have this array (of marker objects), you can see which marker was clicked upon

I think this is what you want.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var latitude=[10, 20, 30];
var longitude=[10, 20, 30];
var address=["Test1", "Test2", "Test3"];
var markers = [];  // store the marker objects here
var infoWindow;

function initialize() {
  var mapObject = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 4,
    center: new google.maps.LatLng(latitude[1], longitude[1])  // let's take the middle marker as center
  };
  map = new google.maps.Map(document.getElementById("googleMap"), mapObject);
  loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

function loadMarkers() {
  for (var i=0; i<=latitude.length; i++) {
    var markerCenter = new google.maps.LatLng(latitude[i], longitude[i]);
    var marker = new google.maps.Marker({
      position: markerCenter,
      // animation: google.maps.Animation.BOUNCE,
      map: map  // replaces  marker.setMap(map);
    });
    markers.push(marker);  // store the marker in the array
    // click on the marker
    google.maps.event.addListener(marker, 'click', function () {
      // first we want to know which marker the client clicked on.
      var i=markers.indexOf(this);
      // we set the content of infoWindow, then we open it.
      infoWindow.setContent(address[i])
      infoWindow.open(map, markers[i]);
    });
  }
  // make 1 infowindow.  We will use it again and again
  infoWindow = new google.maps.InfoWindow({
    content: ''
  });
}
</script>
<style>
#googleMap {
  height: 400px;
}
</style>
<div id="googleMap"></div>

Thanks for helping :) – Anurag Chakraborty Aug 11 '15 at 06:57 — Anurag Chakraborty, Aug 11 '15 at 06:57

Multiple marker content displaying same location

1 Answers1