Google API v3 MarkerCluster and AJAX failing to display grouped markers

Question

I have looked at the linked answer but although I thought I logically follow it's flow I can't apply it to my code: Google Maps API Marker Clusterer and Ajax

I can't figure out where to place markerCluster.add(markers); When I had the JSON documents loaded from a file I had no trouble.

Any help would be appreciated.

/****
 Google Map
 ****/
function renderMap() {

    var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    var iconBase = 'http://temp.net/sites/recall/images/';
    var markerCluster = new MarkerClusterer(map, {averageCenter: true, gridSize: 40});
    var markers = [];

    /****
     Create Markers and bind events. recall loaded from HTML
     ****/
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "*************",
        success: function (data) {
            $.each(data[0], function () {
                if (this.$oid == null) {

                    var markerPos = new google.maps.LatLng(this.lat, this.lng);

                    var marker = new google.maps.Marker({
                        position: markerPos,
                        map: map,
                        title: this.title,
                        icon: iconBase + this.icon
                    });
                    markers.push(marker);

                    var pano = null;

                    var data = this;
                    /****
                     Closure
                     ****/
                    (function (marker, data) {
                        google.maps.event.addListener(marker, 'click', function (e) {
                            map.setZoom(19);
                            map.setCenter(marker.getPosition());
                            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                            $("#slider-horizontal").on().delay(500).fadeIn('2000');
                            if (pano != null) {
                                pano.unbind("position");
                                pano.setVisible(false);
                            }

                            var panoramaOptions = {
                                navigationControl: false,
                                navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
                                enableCloseButton: true,
                                addressControl: false,
                                linksControl: false,
                                panControl: false,
                                clickToGo: false,
                                scrollwheel: false,
                                draggable: false,
                                panControl: false,
                                enableCloseButton: true,
                                pov: {
                                    heading: eval(data.heading),
                                    pitch: eval(data.pitch),
                                    zoom: eval(data.zoom)
                                }
                            }

                            pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), panoramaOptions);

                            pano.bindTo("position", marker);
                            pano.setVisible(true);

                            var closeButton = document.querySelector('.images');

                            google.maps.event.addDomListener(closeButton, 'click', function () {
                                pano.setVisible(false);
                            });

                            google.maps.event.addListener(pano, 'visible_changed', function () {
                                $('#slider-horizontal').on().slider('value', 1).hide();
                                $('.images .old').css('opacity', 1);
                                map.setZoom(20);
                            });
                        });
                    })(marker, data);
                    /****
                     END Closure
                     ****/
                }
            });
        }
    });
    /****
     END $.each(recall, function()
     ****/
    google.maps.event.addListener(map, 'zoom_changed', function () {
        zoom = map.getZoom();
        if (zoom < 15) {
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        } else {
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
        }
    });
    //{gridSize: 40} to prevent markers from being grouped even at max zoom
    //var markerCluster = new MarkerClusterer(map, markers, {averageCenter: true, gridSize: 40});
}//END renderMap()

renderMap();

SAMPLE DATA: Currently REST returns:

[
    {
        "_id": {
            "$oid": "51c4e7375c90fdb357954af1"
        },
        "jfkmotorcade": {
            "class": "jfkmotorcade",
            "image": "jfk_motorcade.jpg",
            "lat": "53.26648",
            "lng": "-9.070578999999952",
            "title": "JFK Motorcade",
            "icon": "president_seal_small.png",
            "heading": "56.40777127701934",
            "pitch": "-1.3747348931946495",
            "zoom": "1.5",
            "date": "",
            "comments": {},
            "tags": {}
        }
    }
]

but I will be changing it to:

{
    "class": "jfkmotorcade",
    "image": "jfk_motorcade.jpg",
    "lat": "53.26648",
    "lng": "-9.070578999999952",
    "title": "JFK Motorcade",
    "icon": "president_seal_small.png",
    "heading": "56.40777127701934",
    "pitch": "-1.3747348931946495",
    "zoom": "1.5",
    "date": "",
    "comments": {},
    "tags": {}
}

Answer 1

You have a scope problem with your map variable. If I make it global it works.

var map = null;
function renderMap() {

    var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    // ...

(although as you only provided one piece of data, it doesn't cluster...)