JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
</style>

<div class="google-map">
	<!-- MAP -->
	<div id="map" style="height: 600px; width: 100%;"></div>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCxpYn7zKraYnXML03RUGEehR-NoatSN7E&libraries=places"></script>
	

</div>

JavaScript

// <![CDATA[
window.onload=function(){

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(-33.888738, 151.209170),
      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') 
    }
}