JSFiddle - React, Tailwind, and code Playground

by Gloak

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    width:600px;
    height:600px;
    position:"absolute";
    top: 0px;
    left: 0px;
    overflow:"hidden";
}

JavaScript

var BERLIN = new google.maps.LatLng(52.520816, 13.410186),
    map = null,
    marker = null,
    index = 0,
    infoWindow = null;

function createMap() {
    return new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: BERLIN,
        zoom: 12
    });
}


function dropMarker(map, pos, box) {
    return new google.maps.Marker({
        map: map,
        position: pos,
        draggable: false,
        
    });
}

function changeMarker() {
    if (marker) {
        infoWindow.close();
        marker.setMap(null);
    }

    var pos = NEIGBORHOODS[index];
    var box = infowindows[index];
    marker = dropMarker(map, pos, box);
    var contentString = ('lat:' + box.lat+ '<br />' + 'lng:' + box.lng  + '<br />'  +'name:' + box.name);
			infoWindow.setContent( contentString);
    setTimeout(function () {
        infoWindow.open(map, marker);
    }, 500);

    index = (index + 1) % NEIGBORHOODS.length;

    setTimeout(function () {
        changeMarker();
    }, 2000);
}

map = createMap();
infoWindow = new google.maps.InfoWindow();
$.post('/echo/json/', {
    json: JSON.stringify([{
        lat: 52.511467,
        lng: 13.447179,
        name:'Paul'
    }, {
        lat: 52.549061,
        lng: 13.422975,
        name:"Paolo"
    }, {
        lat: 52.497622,
        lng: 13.396110,
        name:"Paulo"
    }, {
        lat: 52.517683,
        lng: 13.394393,
        name:"Pablo"
    }])
},

function (json) {
    NEIGBORHOODS = [];
    infowindows =[];
    $.each(json, function () {
     NEIGBORHOODS.push(new google.maps.LatLng(this.lat, this.lng));
        
    contentString = ({

        lat: this.lat,
        lng: this.lng,
                name: this.name,
    })
    infoWindow = new google.maps.InfoWindow(contentString);
    infowindows.push(infoWindow);
    });
    changeMarker();

});