JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
CSS
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
JavaScript
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
point = [];
point[0] = new google.maps.LatLng(0.0,0.0);
point[1] = new google.maps.LatLng(0.0,10.0);
point[2] = new google.maps.LatLng(0.0,20.0);
var infowindow = [];
for (var i = 0; i < 3; i++) {
var markerOptions = {position:point[i], map:map};
var marker = new google.maps.Marker(markerOptions);
content = "Hello " + i;
infowindow[i] = new google.maps.InfoWindow({content: content});
google.maps.event.addListener(marker, 'mouseover', function()
{
infowindow[i].open(map,this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);