JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<div id="map"></div>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(2.8, -187.3),
      mapTypeId: 'terrain'
    });
    loop()
  }

  // Loop through the results array and place a marker for each
  // set of coordinates.
  function loop() {

    var lati = JSON.parse(localStorage.getItem("lat2"))
    console.log("Hi")
    console.log(lati)
    if (lati != null) {} else {
      console.log("creating lat2 localStorage");
      lati = [
        [-33.890542, 151.274856],
        [-33.923036, 151.259052],
        [-34.028249, 151.157507],
        [-33.80010128657071, 151.28747820854187],
        [-33.950198, 151.259302]
      ];
      localStorage.setItem("lat2", JSON.stringify(lati));
    }
    console.log("importing lat2 localStorage");
    for (var i = 0; i < lati.length; i++) {
      var coords = lati[i]
      var latLng = {
        lat: (coords[0]),
        lng: (coords[1])
      };
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }

  }

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

CSS

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}