Ryan Dorn Ryan Dorn - 3 months ago 30
HTML Question

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

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: 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)

  2. I want to populate my map from data attributes of some DOM elements

  3. Instead of using the default map markers, I want to use HTML markers like here: Google Maps: Multiple Custom HTML Markers



What I have:


  1. A fiddle: https://jsfiddle.net/yh2ucyq7/

  2. the markers are loading somewhat correctly, the lat/lng works



What I can't figure out


  1. 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



My JavaScript:

// 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++) {

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 < 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();

Answer

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>

Comments