JSFiddle - React, Tailwind, and code Playground

by vsah

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<div id="map_canvas" style="width:100%;height:100%; position:absolute;"></div>

JavaScript

var locations = new Array(3);

  locations [0] = new Array(3);
  locations[0][0] = "Bondi Beach";
  locations[0][1] = 23.0300;
  locations[0][2] = 72.4000;
  locations[0][3] = 3;

  locations [1] = new Array(3);
  locations[1][0] = 'Coogee Beach'
  locations[1][1] =  21.3600;
  locations[1][2] = 71.1500;
  locations[1][3] = 4;

  locations [2] = new Array(3);
  locations[2][0] = 'Cronulla Beach';
  locations[2][1] = 22.3200;
  locations[2][2] = 73.0000;
  locations[2][3] = 73.0000;

   

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 6,
      center: new google.maps.LatLng(locations[0][1], locations[0][2]),
      mapTypeId: google.maps.MapTypeId.HYBRID
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }