Request.JSON

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

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="map" style="width:100%; height:1000%; border: 2px solid #3872ac;"></div>

CSS

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

$('document').ready(function () {

    $('#map').height($(window).height() - $('#map').position().top - 20);

    var mapElem = document.getElementById('map');

    var center = {
        lat: 47.6,
        lng: -122.3
    };

    var map = new google.maps.Map(mapElem, {
        center: center,
        zoom: 12
    });

    var infoWindow = new google.maps.InfoWindow();
    var cameras;
    var markers = [];

    new Request.JSON({
        url: '/echo/json/',
        data: {
            json: JSON.encode(JSONdata),
            delay: 3
        },
        onSuccess: function (response) {
            show_map(response);
        }
    }).send();

    var show_map = function (data) {
        cameras = data;
        cameras.forEach(function (cameras) {
            var marker = new google.maps.Marker({
                position: {
                    lat: parseFloat(cameras.location.latitude),
                    lng: parseFloat(cameras.location.longitude)
                }
            });

            google.maps.event.addListener(marker, 'click', function () {
                map.panTo(this.getPosition());
                var html = '<p>' + cameras.cameralabel + '</p>';
                html += '<img src="' + cameras.imageurl.url + '"/>';
                infoWindow.setContent(html);
                infoWindow.open(map, this);
            });

            google.maps.event.addListener(map, 'click', function () {
                infoWindow.close();
            });

            markers.push(marker);

            $('#search').bind('search keyup', function () {
                var cameraName = cameras.cameralabel.toLowerCase();
                var searchString = this.value.toLowerCase();
                if (cameraName.indexOf(searchString) < 0) {
                    marker.setMap(null);
                } else {
                    marker.setMap(map);
                }
            });
            var markerCluster = new MarkerClusterer(map, markers);
        });
   ...