I'm working on a google map where:
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)
I want to populate my map from data attributes of some DOM elements
Instead of using the default map markers, I want to use HTML markers like here: Google Maps: Multiple Custom HTML Markers
What I have:
- A fiddle: https://jsfiddle.net/yh2ucyq7/
- the markers are loading somewhat correctly, the lat/lng works
What I can't figure out
- 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();
