JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>
<div id="mapcoords" data-lat="40" data-lng="-117" data-zoom="5"></div>

CSS

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

JavaScript

function initMap() {

    
    var uluru = {lat: parseFloat(document.getElementById('mapcoords').getAttribute("data-lat")) , 
    lng: parseFloat(document.getElementById('mapcoords').getAttribute("data-lng")) };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: parseInt(document.getElementById('mapcoords').getAttribute("data-zoom")),
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
google.maps.event.addDomListener(window, "load", initMap);