Request.JSON

sending a JSON request to the jsFiddle backend. Later on parse and display the data.

by Alex Azuero

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<div class='wrapper'>
    <p>JSON will be received in 3 seconds</p>
    <ul id='post'></ul>
</div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

JavaScript

var map = null;
var gmarkers = [];
var intervalNumber = 0;
setInterval(function () {
    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode([{
                "lat": 35.6606376 + (0.01 * intervalNumber),
                    "lng": -80.5048653 + (0.1 * intervalNumber),
                    "content": "bca",
                "description":"first marker"
            }, {
                "lat": 42.6799504 + (0.01 * intervalNumber),
                    "lng": -36.4949205 - (0.1 * intervalNumber),
                    "content": "abc",
                "description": "second marker"
            }]),
            delay: 3
        },
        onSuccess: function (response) {
            update_map(response);
            intervalNumber++;
        }
    }).send();
}, 1000);
update_map = function (data) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(null);
    }
    gmarkers = [];
    for (var i = 0, length = data.length; i < length; i++) {
        latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
        bounds.extend(latLng);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data[i].title
        });
        var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
            infoWindow.open(map, marker);
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description+"<br>"+marker.getPosition().toUrlValue(6));
                infoWindow.open(map, marker);
            });
        })(marker, data[i]);
        gmarkers.push(marker);
    }
    map.fitBounds(bounds);
};

function initialize() {
    var mapOptions = {
       ...