JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow;
(function () {
google.maps.Map.prototype.markers = new Array();
google.maps.Map.prototype.addMarker = function(marker) {
this.markers[this.markers.length] = marker;
};
google.maps.Map.prototype.getMarkers = function() {
return this.markers
};
})();
function initialize() {
var latlng = new google.maps.LatLng(35.092945313732635, 33.211669921875);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
//mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var a = new Array();
var t = new Object();
t.name = "test0"
t.lat = 35.092945313732635
t.lng = 33.211669921875
a[0] = t;
var t = new Object();
t.name = "test1"
t.lat = 22.735656852206482
t.lng = 57.2607421875
a[1] = t;
var t = new Object();
t.name = "test2"
t.lat = 24.00632619875113
t.lng = 44.6484375
a[2] = t;
for (var i = 0; i < a.length; i++) {
var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
map.addMarker(createMarker(a[i].name,latlng));
}
console.log(map.getMarkers());
console.log(map.getMarkers());
}
function createMarker(name, latlng) {
var marker = new google.maps.Marker({position: latlng, map: map});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:240px;float:left;"></div>
<br...