Mapclusterer fails when rendering google map

Question

I previously fetched all my markers coordinates on page load from address strings, which I now know is very bad. I refactored the code, it works perfectly but the clustermarkerer fails to load.

All I get in firebug is this:

TypeError: marker.getPosition is not a function


return bounds.contains(marker.getPosition());

I've been trying alot of things so there might be an unneccessary line or two.

        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        @*<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>*@
        <script type="text/javascript">

var script = '<script type="text/javascript" src="../Scripts/markerclusterer';
            if (document.location.search.indexOf('compiled') !== -1) {
                script += '_compiled';
            }
            script += '.js"><' + '/script>';
            document.write(script);
        </script>
        <script>

            var bounds = new google.maps.LatLngBounds();
            var latlng = new google.maps.LatLng(21.0000, 78.0000);

            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 5,
                styles: [{ featureType: "landscape", stylers: [{ saturation: -100 }, { lightness: 65 }, { visibility: "on" }] }, { featureType: "poi", stylers: [{ saturation: -100 }, { lightness: 51 }, { visibility: "simplified" }] }, { featureType: "road.highway", stylers: [{ saturation: -100 }, { visibility: "simplified" }] }, { featureType: "road.arterial", stylers: [{ saturation: -100 }, { lightness: 30 }, { visibility: "on" }] }, { featureType: "road.local", stylers: [{ saturation: -100 }, { lightness: 40 }, { visibility: "on" }] }, { featureType: "transit", stylers: [{ saturation: -100 }, { visibility: "simplified" }] }, { featureType: "administrative.province", stylers: [{ visibility: "off" }]/**/ }, { featureType: "administrative.locality", stylers: [{ visibility: "off" }] }, { featureType: "administrative.neighborhood", stylers: [{ visibility: "on" }]/**/ }, { featureType: "water", elementType: "labels", stylers: [{ visibility: "on" }, { lightness: -25 }, { saturation: -100 }] }, { featureType: "water", elementType: "geometry", stylers: [{ hue: "#ffff00" }, { lightness: -25 }, { saturation: -97 }] }],
                center: new google.maps.LatLng(63.12816100000001, 17.643501000000015),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                panControl: true,
                panControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_TOP
                },
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.LARGE,
                    position: google.maps.ControlPosition.RIGHT_TOP
                }
            });

                var markers = [];
            jQuery(function ($) {

                var mcOptions = {
                    styles: [{
                        height: 36,
                        url: "../images/music_rock.png",
                        width: 32,
                        textColor: "white",
                        textSize: 20,

                    }]
                }

                $.ajax({
                    type: "GET",
                    datatype: 'json',
                    url: "/Handler/GetLocations.ashx",
                    data: "",
                    success: function (data) {

                        $(data).each(function (i) {
                            var loaction = [data[i].Address, data[i].Latitude, data[i].Langitude, data[i].index];
                            markers.push(loaction);
                        });

                        console.log(markers);
                        console.log(map);
                        console.log(mcOptions);

                        initializer(markers);
                        var markerCluster = new MarkerClusterer(map, markers, mcOptions);

                    },
                    error: function (f, d, s) {

                    }
                });

            });

            function initializer(locations) {

                var infowindow = new google.maps.InfoWindow();

                for (i = 0; i < locations.length; i++) {

                        marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        animation: google.maps.Animation.DROP,
                        icon: "../images/musicMarker.png"

                        });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);

                            var latlng = new google.maps.LatLng(21.0000, 78.0000);
                        }

            //bounds.extend(marker.position);
                    }));
                }
            }

        </script>

Answer 1

Simply, the markers array weren't fully populated. I added tempMarkers to push markers with needed attributes.

                    var tempMarkers = [];
                for (i = 0; i < locations.length; i++) {

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        animation: google.maps.Animation.DROP,
                        icon: "../images/musicMarker.png"

                    });
                    tempMarkers.push(marker);

                }

Then added the array to the clusterer:

markerClusterer = new MarkerClusterer(map, tempMarkers, mcOptions);

Hope it helps someone with the same error!