JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id ="content"><ul><li>a</li>
<li>b</li>
<li>c</li>
</ul></div>
<div id='map'>test</div>
CSS
#map
{
background-color: #E5E3DF;
height: 500px;
overflow: hidden;
position: relative;
width: 500px;
}
JavaScript
var strLat = 27.0957739;
var strLng = -82.4366176;
var objMap, objLocation, objLocation2, mapTypes, strHtml, objMarker;
function createMarker(objPoint)
{
strHtml = "your html"+objPoint;
var markerOptions =
{
position: objPoint,
map: objMap,
html: strHtml
}
objMarker = new google.maps.Marker(markerOptions);
google.maps.event.addListener(objMarker, "click", function()
{
objInfoWindow.setContent(this.html);
objInfoWindow.open(objMap, this);
window.setTimeout(function (){
objInfoWindow.setContent(document.getElementById("content"));
}, 500);
});
return objMarker;
}
objLocation = new google.maps.LatLng(strLat, strLng);
objLocation2 = new google.maps.LatLng(strLat+1, strLng+1);
mapTypes = new Array(google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP)
var mapOptions =
{
zoom: 5,
center: objLocation,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
mapTypeId: google.maps.MapTypeId.HYBRID
};
objMap = new google.maps.Map(document.getElementById("map"),mapOptions);
createMarker(objLocation);
createMarker(objLocation2);
//creates the window with the options
objInfoWindow = new google.maps.InfoWindow(
{
content: "holding content...",
maxWidth: 250,
zIndex: -1
});