javascript - Store Locator Library の例にマーカー クラスターを追加する (Google Maps API v3 を使用)

Question

Store Locator Library for Maps APIの例/デモを使用して適応させています。

マップにクラスター マーカーを追加したいと考えています。これに関連すると思われるコードのセクションは次のとおりです。

var ICON = new google.maps.MarkerImage( pathImage, null, null, new google.maps.Point( 14, 13 ) ); var SHADOW = new google.maps.MarkerImage( pathShadow, null, null, new google.maps.Point( 14, 13 ) );

google.maps.event.addDomListener
    ( 
        window, 
        'load', 
        function()
        {
            var map = new google.maps.Map
                ( 
                    document.getElementById( canvasLoc ), 
                    {
                        center: new google.maps.LatLng( 53.64, -3.3  ), 
                        zoom: 6, 
                        navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.SMALL},
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                );

            var panelDiv = document.getElementById( panelLoc );
            var data = new CustomDataSource;

            var view = new storeLocator.View
                ( 
                    map, 
                    data, 
                    {
                        geolocation: false,
                        features: data.getFeatures()
                    }
                );
                map.setOptions({styles: styles});

            view.createMarker = 
                function( store )
                {
                    var markerOptions = 
                        {
                            position: store.getLocation(), 
                            icon: ICON, 
                            shadow: SHADOW, 
                            title: store.getDetails().title
                        };
                    return new google.maps.Marker( markerOptions );
                }

            var infoBubble = new InfoBubble({
            maxWidth: 300,
            arrowSize: 20,
            borderWidth: 8,
            borderColor: 'rgb(255,255,255)',
            backgroundColor: 'rgba(204,204,204, 0.7)'
            });

            view.getInfoWindow = 
                function( store )
                {
                    if( !store )
                    {
                        return infoBubble;
                    }

                    var details = store.getDetails();

                    var html = 
                        [
                            '<div class="store"><div class="title">', 
                            details.title,
                            '</div><div class="address">', 
                            details.address, 
                            '</div>',
                            '<div class="hours misc">', 
                            details.hours, 
                            '</div></div>'
                        ].join('');


                    infoBubble.setContent( $( html )[0] );

                    return infoBubble;
                };

            new storeLocator.Panel
                (
                    panelDiv, 
                    {
                        view: view
                    }
                );
        }
    );

上記は custom.js からの引用です

マーカー クラスターのコードをどこに配置する必要があるかが正確にわかりません (ここに例を示します)。マーカーを配列に追加し、これをマップとともに MarkerClusterer オブジェクトに渡す必要があると書かれています。

以下は、思いついた最高のアイブです。

                var view = new storeLocator.View
                ( 
                    map, 
                    data, 
                    {
                        geolocation: false,
                        features: data.getFeatures()
                    }
                );
                map.setOptions({styles: styles});

            var markers=[];
            view.createMarker = 
                function( store )
                {
                    var markerOptions = 
                        {
                            position: store.getLocation(), 
                            icon: ICON, 
                            shadow: SHADOW, 
                            title: store.getDetails().title
                        };
                    return new google.maps.Marker( markerOptions );
                }
                markers.push(view.createMarker);
                markerClusterer = new MarkerClusterer(map, markers)