JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div class="hidden" id="map-styles">[{
		"elementType": "geometry",
		"stylers": [{
			"color": "#242f3e"
		}]
	},
	{
		"elementType": "labels.text.stroke",
		"stylers": [{
			"color": "#242f3e"
		}]
	},
	{
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#746855"
		}]
	},
	{
		"featureType": "administrative.locality",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#d59563"
		}]
	},
	{
		"featureType": "poi",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#d59563"
		}]
	},
	{
		"featureType": "poi.park",
		"elementType": "geometry",
		"stylers": [{
			"color": "#263c3f"
		}]
	},
	{
		"featureType": "poi.park",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#6b9a76"
		}]
	},
	{
		"featureType": "road",
		"elementType": "geometry",
		"stylers": [{
			"color": "#38414e"
		}]
	},
	{
		"featureType": "road",
		"elementType": "geometry.stroke",
		"stylers": [{
			"color": "#212a37"
		}]
	},
	{
		"featureType": "road",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#9ca5b3"
		}]
	},
	{
		"featureType": "road.highway",
		"elementType": "geometry",
		"stylers": [{
			"color": "#746855"
		}]
	},
	{
		"featureType": "road.highway",
		"elementType": "geometry.stroke",
		"stylers": [{
			"color": "#1f2835"
		}]
	},
	{
		"featureType": "road.highway",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#f3d19c"
		}]
	},
	{
		"featureType": "transit",
		"elementType": "geometry",
		"stylers": [{
			"color": "#2f3948"
		}]
	},
	{
		"featureType": "transit.station",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#d59563"
		}]
	},
	{
		"featureType": "water",
		"elementType": "geometry",
		"stylers": [{
			"color": "#17263c"
		}]
	},
	{
		"featureType": "water",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#515c6d"
		}]
	},
	{
		"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");
	
// map args
var mapArgs = {
  zoom: $el.data("zoom") || 16,
  mapTypeControlOptions: {
    mapTypeIds: [
      'custom_map_style',
      google.maps.MapTypeId.ROADMAP,
      google.maps.MapTypeId.SATELLITE
    ],
    style: google.maps.MapTypeControlStyle.HORIZONTAL
  }
};

// set our map
var map = new google.maps.Map($el[0], mapArgs); // Add markers.

// get our json from #map-sytles div
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 centerMap(map) {
  // Create map...