JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="acf-map" data-zoom="19" data-style="[
  {elementType: &#039;geometry&#039;, stylers: [{color: &#039;#242f3e&#039;}]},
  {elementType: &#039;labels.text.stroke&#039;, stylers: [{color: &#039;#242f3e&#039;}]},
  {elementType: &#039;labels.text.fill&#039;, stylers: [{color: &#039;#746855&#039;}]},
  {
  featureType: &#039;administrative.locality&#039;,
  elementType: &#039;labels.text.fill&#039;,
  stylers: [{color: &#039;#d59563&#039;}]
  },
  {
  featureType: &#039;poi&#039;,
  elementType: &#039;labels.text.fill&#039;,
  stylers: [{color: &#039;#d59563&#039;}]
  },
  {
  featureType: &#039;poi.park&#039;,
  elementType: &#039;geometry&#039;,
  stylers: [{color: &#039;#263c3f&#039;}]
  },
  {
  featureType: &#039;poi.park&#039;,
  elementType: &#039;labels.text.fill&#039;,
  stylers: [{color: &#039;#6b9a76&#039;}]
  },
  {
  featureType: &#039;road&#039;,
  elementType: &#039;geometry&#039;,
  stylers: [{color: &#039;#38414e&#039;}]
  },
  {
  featureType: &#039;road&#039;,
  elementType: &#039;geometry.stroke&#039;,
  stylers: [{color: &#039;#212a37&#039;}]
  },
  {
  featureType: &#039;road&#039;,
  elementType: &#039;labels.text.fill&#039;,
  stylers: [{color: &#039;#9ca5b3&#039;}]
  },
  {
  featureType: &#039;road.highway&#039;,
  elementType: &#039;geometry&#039;,
  stylers: [{color: &#039;#746855&#039;}]
  },
  {
  featureType: &#039;road.highway&#039;,
  elementType: &#039;geometry.stroke&#039;,
  stylers: [{color: &#039;#1f2835&#039;}]
  },
  {
  featureType: &#039;road.highway&#039;,
  elementType: &#039;labels.text.fill&#039;,
  stylers: [{color: &#039;#f3d19c&#039;}]
  },
  {
  featureType: &#039;transit&#039;,
  elementType: &#039;geometry&#039;,
  stylers: [{color: &#039;#2f3948&#039;}]
  },
  {
  featureType: &#039;transit.station&#039;,
  elementType: &#039;labels.text.fill&#039;,
  stylers: [{color: &#039;#d59563&#039;}]
  },
  {
  featureType:...

CSS

html,
body,
.acf-map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.hidden {
  display: none; 
}

JavaScript

function initMap($el) {

  // Find marker elements within map.
  var $markers = $el.find(".marker");

  var mapArgs = {
    zoom: $el.data("zoom") || 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        'custom_map_style',
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE
      ],
      style: google.maps.MapTypeControlStyle.HORIZONTAL
    }
  };

  var map = new google.maps.Map($el[0], mapArgs); // Add markers.
  
  var customStyle = JSON.parse($('#map-styles').text());

  // create the StyledMapType object
  var customStyleMap = new google.maps.StyledMapType(customStyle, {
    name: 'Custom Style'
  });

  // set the StyledMapType against the map
  map.mapTypes.set('custom_map_style', customStyleMap);
  map.setMapTypeId('custom_map_style');


  map.markers = [];
  $markers.each(function() {
    initMarker($(this), map);
  }); // Center map based on markers.

  centerMap(map); // Return map instance.

  return map;
}

function initMarker($marker, map) {
  // Get position from marker.
  var lat = $marker.data("lat");
  var lng = $marker.data("lng");
  var icon = $marker.attr("data-icon");
  var latLng = {
    lat: parseFloat(lat),
    lng: parseFloat(lng)
  }; // Create marker instance.

  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: icon
  }); // Append to reference for later use.

  map.markers.push(marker); // If marker contains HTML, add it to an infoWindow.

  if ($marker.html()) {
    // Create info window.
    var infowindow = new google.maps.InfoWindow({
      content: $marker.html()
    }); // Open info window by default for a marker.

    var openinfowindow = $marker.data("infowindow");

    if (openinfowindow) {
      infowindow.open(map, marker);
    } // Show info window when marker is clicked.


    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
  }
}

function...