JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div style="display: grid; grid-template-columns: 100vw; grid-template-rows: 100vh; overflow: hidden;">
  <div style="display: grid; grid-template-columns: 100%; grid-template-rows: 90% 10%; overflow: hidden;">
    <div style="display: grid; grid-template-columns: 100vw; grid-template-rows: 100vh; overflow: hidden; grid-area: A / A / A / A;">
      <div style="display: grid; grid-template-columns: 100%; grid-template-rows: 90% 10%; overflow: hidden;">
        <div id="map" style="grid-area: MAP / MAP / MAP / MAP; position: relative; overflow: hidden;">
            map html here
        </div>
      </div>
    </div>
    other content
  </div>
</div>

CSS

#map {
  height: 500px;
  width: 100%;
  background: red;
}

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...