JSFiddle - React, Tailwind, and code Playground

by Ian Sanders

HTML

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDUxIOJz1d5XW45gMbrJYj3Vx0RhVOV3cs&callback=initMap" type="text/javascript"></script>

CSS

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

JavaScript

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
}

function initMap() {
  var initLoc = {
    lat: 0, lng:0
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 19,
    center: initLoc,
    disableDefaultUI: true,
    gestureHandling: 'none',
    zoomControl: false
  });
  var youMarker = new google.maps.Marker({
    position: initLoc,
    map: map,
    icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Location_dot_blue.svg/16px-Location_dot_blue.svg.png"
  });
  var watchOptions = {
    enableHighAccuracy: true,
    timeout: Infinity,
    maximumAge: 0
  };
  var accuracyCircle = new google.maps.Circle({
    strokeColor: '#00FF00',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#00FF00',
    fillOpacity: 0.35,
    map: map,
    center: initLoc,
    radius: 1000
  });
  var watchID = navigator.geolocation.watchPosition(function(position, error, watchOptions) {
    var curLoc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    map.panTo(curLoc);
    youMarker.position = curLoc;
    accuracyCircle.center = curLoc;
    accuracyCircle.radius = position.coords.accuracy;
    console.log("Updated Position", curLoc, position.coords.accuracy);
  });
}