Multiple individual titles for multiple google map markers

Question

I have a google map and I want it to display varies resellers, now I have the map working perfectly the markers fall in place everything, however I want to add a unique title to each marker, but I am struggling to get that right, if I add the title option then that title displays the same on all markers.

So I need a way to display unique titles on each marker, this is my code:

// If you're adding a number of markers, you may want to drop them on the map
// consecutively rather than all at once. This example shows how to use
// window.setTimeout() to space your markers' animation.
var centerSA = new google.maps.LatLng(-30.289471, 24.284893);
var neighborhoods = [
  new google.maps.LatLng(-33.880754, 18.634368),
  new google.maps.LatLng(-33.873804, 18.634843),
  new google.maps.LatLng(-34.112384, 18.844713),
  new google.maps.LatLng(-34.082823, 18.840496),
  new google.maps.LatLng(-29.492389, 31.218657),
  new google.maps.LatLng(-33.863724, 18.578321),
  new google.maps.LatLng(-29.857765, 31.021630),
  new google.maps.LatLng(-26.028311, 28.004132),
  new google.maps.LatLng(-34.031815, 23.045850),
  new google.maps.LatLng(-34.053906, 23.370542),
  new google.maps.LatLng(-33.963073, 22.459156),
  new google.maps.LatLng(-32.989910, 27.872604),
  new google.maps.LatLng(-33.302933, 26.523438),
  new google.maps.LatLng(-28.768805, 32.019887),
  new google.maps.LatLng(-27.645871, 27.229928),
  new google.maps.LatLng(-28.236912, 28.308702),
  new google.maps.LatLng(-25.872222, 29.235887),
  new google.maps.LatLng(-27.751827, 29.936295),
  new google.maps.LatLng(-28.734564, 24.756509),
  new google.maps.LatLng(-25.656175, 27.255232),
  new google.maps.LatLng(-26.956302, 24.728201),
  new google.maps.LatLng(-26.964996, 26.659299),
  new google.maps.LatLng(-26.808988, 27.829341),
  new google.maps.LatLng(-26.489940, 28.383779),
  new google.maps.LatLng(-26.459522, 29.465437),
  new google.maps.LatLng(-28.411019, 21.251776),
  new google.maps.LatLng(-22.556783, 17.065234),
  new google.maps.LatLng(-22.951268, 14.515005),
  new google.maps.LatLng(-34.408175, 19.253408),
  new google.maps.LatLng(-28.803741, 24.707523)
];

var markers = [];
var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    center: centerSA
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
           if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             map.setCenter(initialLocation);
         });
     }
}
        
function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 200);
  }
}
        
function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}
function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}

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

<head>
      <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: ;
        padding-top: 55px;
      }

      /*
      Provide the following styles for both ID and class,
      where ID represents an actual existing "panel" with
      JS bound to its name, and the class is just non-map
      content that may already have a different ID with
      JS bound to its name.
      */

    </style>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
</head>
<body>
      <div id="panel" style="margin-left: -52px">
    <p>
     <a id="drop" onclick="drop()" class="btn btn-warning">Show Resellers</a>  
    </p>
     </div>
    <div id="map-canvas"></div>
  </body>

Why don't you create an array that holds both the coordinates and the title for each marker? — MrUpsidown, Jul 31 '15 at 08:02
Ivan Jovovic hit the nail on the head, thanks so much everyone for your assistance, I learned a lot today. — Erik Thiart, Jul 31 '15 at 08:33
Related question: [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Jul 31 '15 at 11:07
Yes, but no, I have read that question and It wasn't exactly what I wanted at all, hence why I did my best putting it in jsfiddle so people can see what I was trying to accomplish, and Ivan Jovovic's answer was spot on exactly what I needed and far far less complicated. — Erik Thiart, Jul 31 '15 at 15:38

score 2 · Accepted Answer · answered Jul 31 '15 at 08:19

Add titles to your neighborhoods array, and make it array of arrays:

var neighborhoods = [
 [new google.maps.LatLng(-33.880754, 18.634368), "title 1"],
 [new google.maps.LatLng(-33.873804, 18.634843), "title 2"],
 [new google.maps.LatLng(-34.112384, 18.844713), "title 3"],
 [new google.maps.LatLng(-34.082823, 18.840496), "title 4"],
...

Then change function addMarkerWithTimeout to accept title param and add that param when creating marker:

function addMarkerWithTimeout(position, timeout, title) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP,
      title: title
    }));
  }, timeout);
}

Finally, change the function drop to include title (neighborhoods[i][1]) in addMarkerWithTimeout function invocation:

function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i][0], i * 200, neighborhoods[i][1]);
  }
}

Also note that position param is now neighborhoods[i][0], not neighborhoods[i].

Working fiddle: http://jsfiddle.net/10bdh0d6/

@ErikThiart: If my post answers your question, please mark it so: http://stackoverflow.com/help/someone-answers — Ivan Jovović, Jul 31 '15 at 08:57
Ahh, I'm sorry my mistake I am a noob and I'm new, what a combo :), hehe again thank you so much. — Erik Thiart, Jul 31 '15 at 09:16

Multiple individual titles for multiple google map markers

1 Answers1