JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="map"></div>

CSS

#map {
     height: 500px;
     width: 500px;
 }

JavaScript

jQuery(document).ready(function () {
    // Ask for permission
    navigator.geolocation.getCurrentPosition(function(position){
        var myLat = position.coords.latitude;
        var myLong = position.coords.longitude;
        var latLng = new google.maps.LatLng(myLat, myLong);
        map.setCenter(latLng);
    }); 
    
    var map;
    var centerPosition = new google.maps.LatLng(40.747688, -74.004142);
    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);
});