JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map-canvas"></div>
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
JavaScript
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(53.476941, -2.280238),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map-canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
});
}
var x = 0;
function pan_to() {
if(x >= addresses.length){
x=0;
}
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
map.panTo(latlng);
});
x++;
}
setInterval(pan_to,5000);
});