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>
<input id="lat" value="42" />
<input id="lng" value="-72" />
<input type="button" onclick="setLocalStorage();" value="click" />
<div id="map_canvas"></div>

CSS

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

JavaScript

var map;
var marker;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

function setLocalStorage() {
  var lat = document.getElementById('lat').value;
  var lng = document.getElementById('lng').value;
  localStorage.setItem('mylat',lat);
  localStorage.setItem('mylng',lng);
}
setInterval(function() {
  var lat = parseFloat(localStorage.getItem("mylat"));
  var lng = parseFloat(localStorage.getItem("mylng"));
  map.panTo({
    lat: lat,
    lng: lng
  });
  if (!marker || !marker.setPosition) {
    marker = new google.maps.Marker({
      position: {
        lat: lat,
        lng: lng
      },
      map: map
    });
  } else {
    marker.setPosition({
      lat: lat,
      lng: lng
    });
  }
}, 5000);
google.maps.event.addDomListener(window, "load", initialize);