JSFiddle - React, Tailwind, and code Playground

by Gloak

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<!--[if lt IE 8]>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<![endif]-->
<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: "paulo"
    }, {
        lat: 52.497622,
        lng: 13.396110,
        name: "paolo"
    }, {
        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));
        infowindows = push(infoWindow);

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