JSFiddle - React, Tailwind, and code Playground

by katalin_2003

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="mapDiv"></div>

CSS

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

JavaScript

var map;
var drawLayerSite = null;

function initialize() {
  map = new google.maps.Map(document.getElementById('mapDiv'), {
    zoom: 4,
    // mapTypeId: 'satellite'
    mapTypeId: 'terrain',
    center: {
      lat: -25.76,
      lng: 128.84
    }
  });
  setInterval(function() {
    modify(geoJson1);
    reloadGeoJson(geoJson1)
  }, 1000);
}

function reloadGeoJson(geoJson) {
  if (drawLayerSite && drawLayerSite.setMap)
    drawLayerSite.setMap(null);
  drawLayerSite = new google.maps.Data({
    map: map
  });
  drawLayerSite.setStyle({
    fillColor: 'rgba(1, 84, 90, 0.5)',
    fillOpacity: 0.5,
    strokeWeight: 1,
    strokeColor: '#01545A',
    strokeOpacity: 0.8
  });
  drawLayerSite.addGeoJson(geoJson);
}

google.maps.event.addDomListener(window, "load", initialize);

function modify(geoJson) {
  var heading = Math.random() * 360;
  for (var i = 0; i < geoJson.features.length; i++) {
    var pt = new google.maps.LatLng(
      geoJson.features[i].geometry.coordinates[1],
      geoJson.features[i].geometry.coordinates[0]
	);
    var newPt = google.maps.geometry.spherical.computeOffset(pt, 50000, heading);
    geoJson.features[i].geometry.coordinates = [newPt.lng(), newPt.lat()];
  }
}

var geoJson1 = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [123.61, -22.14]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [128.84, -25.76]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Point",
       ...