JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="height:400px"></div>

CSS

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1, p {
  margin: 0;
  padding: 0;
}

JavaScript

var map;
var marker;
var issLocationApi = "https://api.wheretheiss.at/v1/satellites/25544";


// init google map and marker after window.load
google.maps.event.addDomListener(window, "load", function () {
	
    // init map
    map = new google.maps.Map(document.getElementById('map'), {
    	center: {lat: 0, lng: 0},
    	zoom: 5
  	});
    
    // init marker
	marker = new google.maps.Marker({
		position: new google.maps.LatLng(0, 0),
		map: map,
		icon: "http://www.lizard-tail.com/isana/tracking/image/iss.png"
    });
    
});


// refresh map every 1000 miliseconds
var t=setInterval(updateMap, 1000);

// callback function for refresh
function updateMap() {
 	$.getJSON(issLocationApi, function( data ) {
        // set new center of Map
    	map.setCenter({lat: data.latitude, lng: data.longitude});
        
        //set new Marker position
  		marker.setPosition(new google.maps.LatLng(data.latitude, data.longitude));
 	});     
}