How to Populate a Google Map with HTML markers (Overlay) using data attributes from DOM elements

Question

I\'m working on a google map where:

1. I want to run something similar to the \'reload markers\' action here: http://jsfiddle.net/upsidown/p646xmcr/ (NOTE

Answer 1

mapMarkerItem[0] is always the same (as you discovered).

div.innerHTML = mapMarkerItem[0];

You need to pass the unique value into the constructor for the HtmlMarker.

function HTMLMarker(lat, lng, text) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
  this.text = text;
}
HTMLMarker.prototype.onAdd = function() {
  var div = document.createElement('DIV');
  div.style.position = 'absolute';
  div.className = "htmlMarker";
  div.innerHTML = this.text;
  var panes = this.getPanes();
  panes.overlayImage.appendChild(div);
  this.div = div;
}

proof of concept fiddle

code snippet:

function HTMLMarker(lat, lng, text) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
  this.text = text;
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {}

//init your html element here
HTMLMarker.prototype.onAdd = function() {
  var div = document.createElement('DIV');
  div.style.position = 'absolute';
  div.className = "htmlMarker";
  div.innerHTML = this.text;
  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';
}

// 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 < locations.length; i++) {

    var mapMarkerItem = locations[i];
    var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);

    //to use it
    var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2], mapMarkerItem[0]);
    htmlMarker.setMap(map);


    // Set Map Bounds to Auto-center
    bounds.extend(myLatLng);
    map.fitBounds(bounds);

    // Push marker to markers array
    //markers.push(marker);
    markers.push(htmlMarker);
  }
}

function initializeMap() {

  var mapOptions = {
    zoom: 2,
    maxZoom: 18,
    minZoom: 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();

#listings,
.results-map-wrapper {
  width: 50%;
  float: left;
}
#map-canvas {
  width: 100%;
  height: 400px;
}
.htmlMarker {
  background: #f00000;
  color: #ffffff;
  height: 20px;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="listings">
  <div class="listing-item" data-marker-id="01" data-marker-lng="0" data-marker-lat="0">
    Marker 01
  </div>
  <div class="listing-item" data-marker-id="02" data-marker-lng="0" data-marker-lat="-2">
    Marker 02
  </div>
  <div class="listing-item" data-marker-id="03" data-marker-lng="0" data-marker-lat="-4">
    Marker 03
  </div>
  <div class="listing-item" data-marker-id="04" data-marker-lng="0" data-marker-lat="2">
    Marker 04
  </div>
  <div class="listing-item" data-marker-id="05" data-marker-lng="0" data-marker-lat="4">
    Marker 05
  </div>
</div>

<div class="results-map-wrapper">
  <div id="map-canvas"></div>
</div>