title: How to Populate a Google Map with HTML markers (Overlay) using data attributes from DOM elements
body: <p>I'm working on a google map where:</p>
  
  <ol>
  <li><p>I want to run something similar to the 'reload markers' action here: <a href="http://jsfiddle.net/upsidown/p646xmcr/" rel="nofollow noreferrer">http://jsfiddle.net/upsidown/p646xmcr/</a>  <em>(NOTE: this specific part isn't entirely pertinent to this question, I just want to provide some context as the code does use some elements from the aforementioned link)</em></p></li>
  <li><p>I want to populate my map from data attributes of some DOM elements</p></li>
  <li><p>Instead of using the default map markers, I want to use HTML markers like here: <a href="https://stackoverflow.com/questions/29196855/google-maps-multiple-custom-html-markers">Google Maps: Multiple Custom HTML Markers</a></p></li>
  </ol>
  
  <p>What I have:</p>
  
  <ol>
  <li>A fiddle: <a href="https://jsfiddle.net/yh2ucyq7/" rel="nofollow noreferrer">https://jsfiddle.net/yh2ucyq7/</a></li>
  <li>the markers are loading somewhat correctly, the lat/lng works</li>
  </ol>
  
  <p>What I can't figure out</p>
  
  <ol>
  <li>How I can get the inner HTML of each HTML Marker to populate correctly, currently it's only showing the text for the last DOM element used to populate the map</li>
  </ol>
  
  <p>My JavaScript:</p>
  
  <pre><code>    // Make Plot Points From Results DOM Elements
  function makeMapPlotPoints() {
  
      // Set marker from results list and create empty plot point array
      var mapPlotPointDOM = $(".listing-item");
      var mapPlotPointArr = [];
  
      $(mapPlotPointDOM).each(function() {
          if($(this).data("marker-lat") !== ''){
              mapPlotPointArr.push([
                  $(this).data("marker-id"),
                  $(this).data("marker-lat"),
                  $(this).data("marker-lng"),
              ]);
          }
      });
      setMarkers(mapPlotPointArr);
  };
  
  var map;
  var markers = []; // Create a marker array to hold markers
  
  //create empty LatLngBounds object
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  var center = {
      lat: 0,
      lng: 0
  };
  
  var overlay;
  
  function setMarkers(locations) {
  
      for (var i = 0; i &lt; locations.length; i++) {
  
          function HTMLMarker(lat, lng) {
              this.lat = lat;
              this.lng = lng;
              this.pos = new google.maps.LatLng(lat, lng);
          }
  
          HTMLMarker.prototype = new google.maps.OverlayView();
          HTMLMarker.prototype.onRemove = function () {}
  
          var mapMarkerItem = locations[i];
          var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);
  
          //init your html element here
          HTMLMarker.prototype.onAdd = function () {
              div = document.createElement('DIV');
              div.style.position='absolute';
              div.className = "htmlMarker";
              div.innerHTML = mapMarkerItem[0]; // ### NOTE: This is returning the same value for all html markers
              var panes = this.getPanes();
              panes.overlayImage.appendChild(div);
              this.div=div;
          }
  
          HTMLMarker.prototype.draw = function () {
              var overlayProjection = this.getProjection();
              var position = overlayProjection.fromLatLngToDivPixel(this.pos);
              var panes = this.getPanes();
              this.div.style.left = position.x + 'px';
              this.div.style.top = position.y - 10 + 'px';
          }
  
          //to use it
          var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2]);
          htmlMarker.setMap(map);
  
  
          // Set Map Bounds to Auto-center
          bounds.extend(myLatLng);
          map.fitBounds(bounds);
  
          // Push marker to markers array
          markers.push(htmlMarker);
  
          // Marker Info Window / Tooltip (not working)
          google.maps.event.addListener(htmlMarker, 'click', (function(htmlMarker, i) {
              return function() {
                  infowindow.setContent(locations[i][4]);
                  infowindow.open(map, htmlMarker);
              }
          })(htmlMarker, i));
  
      }
  }
  
  
  
  function reloadMarkers() {
  
      // Loop through markers and set map to null for each
      for (var i = 0; i &lt; markers.length; i++) {
  
          markers[i].setMap(null);
      }
  
      // Reset the markers array
      markers = [];
  
      // Call set markers to re-add markers
      makeMapPlotPoints();
  }
  
  function initializeMap() {
  
      var mapOptions = {
          zoom: 2,
          center: new google.maps.LatLng(0, -30),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
      }
  
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
      makeMapPlotPoints();
  
  }
  
  initializeMap();
  </code></pre>