JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var markers = [];
var infowindow = new google.maps.InfoWindow({});
///////////
///markers initialization
///////////
function initialize() {
    var myLatlng = new google.maps.LatLng(-33.923036, 151.259052);
    var mapOptions = {
        zoom: 11,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    var num_markers = locations.length;

    //set infowindow global to prevent multiply opening
    
    for (var i = 0; i < num_markers; i++) {
        markers[i] = new google.maps.Marker({
            position: {lat:locations[i][1], lng:locations[i][2]},
            map: map,
            id: locations[i][3]
        });

        //here is a special stuff to pass iterator
        google.maps.event.addListener(markers[i], 'click', (function(i,infowindow, map) {
            return function() {
                MakeContent(i, map);
            }
        })(i,infowindow, map));

    }
}

google.maps.event.addDomListener(window, 'load', initialize);


function MakeContent(i, map){

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru Hop</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
       ...