JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<div id="map" style="height: 400px; width: 500px;">
</div>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxpYn7zKraYnXML03RUGEehR-NoatSN7E&callback=initMap">
</script>

JavaScript

var locations = [
      ['Sydney Opera House', -33.856606, 151.215522, 6],
      ['Belvoir St Theatre', -33.888738, 151.209170, 7]
      
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    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));

marker.setIcon('https://cdn.shopify.com/s/files/1/2060/9351/t/2/assets/map_smiley_25.svg') 
    }