JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas" data-role="page"></div>

CSS

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

JavaScript

function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else alert("Geolocation is not supported by this browser");

}


function showPosition(position) {
    coord = {};
    coord.lat = position.coords.latitude;
    coord.longi = position.coords.longitude;
    initialize(coord);
}


var map;

function initialize(coord) {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(coord.lat, coord.longi)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}

google.maps.event.addDomListener(window, 'load', getLocation);