Map API Only Displaying Single Marker Instead of Multiple Points

Other Questions API
1

I’m having trouble with displaying multiple markers on my map. I have an array with location data that includes popup content and addresses, but only one marker appears on the map.

I’m trying to create a map that shows several locations based on my data array. Each marker should have a click event that opens an info popup. However, when I run my code, only the final marker from my array gets displayed on the map.

Here’s my current implementation:

<div class="MapContainer">
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY" type="text/javascript"></script>
  <div id="mapDisplay" style="width: 800px; height: 500px;"></div>
  
  <script type="text/javascript">
    var places = [
      ['<h3>Location A</h3>', 'SW1A 1AA'],
      ['<h3>Location B</h3>', 'M1 1AA']
    ];

    var mapInstance = new google.maps.Map(document.getElementById('mapDisplay'), {
      zoom: 6,
      center: new google.maps.LatLng(51.5074, -0.1278),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var popup = new google.maps.InfoWindow();
    var addressConverter = new google.maps.Geocoder();
    var mapMarker = new google.maps.Marker({ map: mapInstance });
    var index;

    for (index = 0; index < places.length; index++) {
      var geoRequest = {address: places[index][1]};
      
      addressConverter.geocode(geoRequest, function(response, status) {
        mapMarker.setPosition(response[0].geometry.location);
      });

      google.maps.event.addListener(mapMarker, 'click', (function(mapMarker, index) {
        return function() {
          popup.setContent(places[index][0]);
          popup.open(mapInstance, mapMarker);
        }
      })(mapMarker, index));
    }
  </script>
</div>

Can someone help me figure out why all my markers aren’t showing up? I expected to see multiple pins on the map but I’m only getting one.

2

You’re reusing the same marker instance in your loop. You create one marker outside the loop, then keep calling setPosition on it - this just moves that single marker around instead of creating multiple markers. There’s also a closure issue with your geocoding callback. Since geocoding is asynchronous, all your callbacks end up referencing the same marker and stale index values. Create a new marker inside each geocoding callback and capture the current index properly. Move the marker creation into the geocode callback and use an IIFE to grab the right index for each iteration. This way each location gets its own marker positioned correctly.

3

u gotta create a new marker for each loc, you’re using the same one. move the var mapMarker = new google.maps.Marker(...) inside the loop. this way it’ll show all the markers properly!

4

You’re only creating one marker outside your loop and just moving it around with setPosition. Every time the geocoding callback runs, it moves that same marker instead of making new ones. Plus, since the geocoding callbacks are asynchronous, they all fire after your loop finishes - so they’re all using the final loop values. Create a new marker inside each geocoding callback instead. Store your markers in an array and make each one when the geocoding response comes back successfully. That way each location gets its own marker.