JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map_canvas" style="height: 400px;"></div>
JavaScript
var map;
google.maps.event.addDomListener(window, "load", function () {
var locations_programs = [
['Christie Lake Camp', 44.803033, -76.418031, 1, 'http://www.christielakekids.com/_images/map_pins/events/canoe-for-kids.png', 'http://www.christielakekids.com'],
['Caldwell Community Centre', 45.373083, -75.735550, 1, 'http://www.christielakekids.com/_images/map_pins/events/caldwell-community-centre.png', 'http://www.christielakekids.com'],
['Dempsey Community Centre', 45.401887, -75.627530, 1, 'http://www.christielakekids.com/_images/map_pins/events/dempsey-community-centre.png', 'http://www.christielakekids.com'],
['Brewer Arena', 45.389560, -75.691445, 1, 'http://www.christielakekids.com/_images/map_pins/events/brewer-arena.png', 'http://www.christielakekids.com']
];
var markersArray = [];
var markers = {};
var mapOptions = {
center: new google.maps.LatLng(45.4214, -75.6919),
zoom: 10,
scrollwheel: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//*** PROGRAMS
var marker, i;
var id = 'programs';
for (i = 0; i < locations_programs.length; i++) {
var id = 'programs' + i;
/* var contentString = '<div style="width: 150px;"><img src="' + locations_programs[i][4] + '" /></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});*/
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_programs[i][1], locations_programs[i][2]),
...