I am developing a web application that contains some information about place. That place may have more than one agenda. Can I show more information in one marker, such as st
Possible way to achieve it(there may be many ways):
downloadUrl()
var markerContents={};
inside the loop where you create the markers populate this object with properties. As name for the properties assign the string-representation of the point(will be returned by LatLng.toString()
). Create a variable of this string:
var markerId = point.toString();
First you have to check now if this property already exists, when not create it and set the value to an empty array:
if(!markerContents[markerId]){ markerContents[markerId] = []; }
Then, after the line where create the html
, push the html
into the array:
markerContents[markerId].push(html);
to avoid the creation of multiple markers at the same position, leave the current iteration before you create the marker, when there are more than 1 item inside the array:
if(markerContents[markerId].length>1){return;}
modify the call of bindInfoWindow();
, pass the array as argument instead of html
bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);
Modify the click-listener of the Marker so that he may use the content of the array as InfoWindowContent
function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html.join('<hr/>')); infoWindow.open(map, marker); }); }
There will no longer be multiple markers at the same position, instead there will be 1 marker with the content set to the html of all markers with this position, delimited by a horizontal rule.