Question

GoogleMapsAPIのクラスタリングについて分かる方、javascriptについて分かる方、是非ご教示いただきたいです。

google maps apiを使った多店舗情報サイトを作成しようとしています。
データはmysqlに格納したものを表示させる形です。

url１. Google マップで MySQL と PHP を使用する | Google Maps JavaScript API | Google Developers - https://developers.google.com/maps/documentation/javascript/mysql-t...

上記を参照し、mysql+phpでデータを取得し、全件のマーカーを表示させるところまではできました。
この後マーカーにクラスタリングを行いたいのですが、そこで詰まっています。


url2. マーカー クラスタリング | Google Maps JavaScript API | Google Developers - https://developers.google.com/maps/documentation/javascript/marker-...

上記などを参考にして、まずマーカーの位置データを配列化し、MarkerClustererに渡さなければならないということまでは分かったのですが、該当コードの書き方が分かりません。
markerclusterer.js、およびクラスタ画像ファイルの配置・指定はできております。
ご教示いただけるとありがたいです。


現在まで作成した該当ソースは下記となります。

*************************************************

    <div id="map" style="width:100%; height:600px;"></div>

    <script>
    var customLabel = {
            eat: {
                icon: 'icon1.png'
            },
            shopping: {
                icon: 'icon2.png'
            },
            fashion: {
                icon: 'icon3.png'
            },
            life: {
                icon: 'icon4.png'
            },
            hospital: {
                icon: 'icon5.png'
            },
            beauty: {
                icon: 'icon6.png'
            },
            hobby: {
                icon: 'icon7.png'
            },
            entertainment: {
                icon: 'icon8.png'
            },
            money: {
                icon: 'icon9.png'
            },
            school: {
                icon: 'icon10.png'
            },
            koukyou: {
                icon: 'icon11.png'
            },
            bussiness: {
                icon: 'icon12.png'
            }
    };


        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(35.65972,139.6954),
          zoom: 6    //開始ズーム
        });
        var infoWindow = new google.maps.InfoWindow;


          downloadUrl('echoxml.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var comment = markerElem.getAttribute('comment');
              var tel= markerElem.getAttribute('tel');

              //urlデータ
              var url= markerElem.getAttribute('url');
              var url2= markerElem.getAttribute('url2');


              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

                var infowincontent = '<h2 class="mapinfo-h">' + name + '</h2>' +
                                      '<p>' + address + '</p>' +
                                      '<a href="tel:' + tel + '">' + tel + '</span>' +
                                      '<dl>' +
                                      '<dd><a href="' + url + '">' + url + '</a></dd>' +
                                      '<dd><a href="' + url2 + '">' + url2 + '</a></dd>' +
                                      '</dl>' +
                                      '<p>' + comment + '</p>' +

              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                  map: map,
                  position: point,
                  icon: icon.icon

              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);//infowincontent
                infoWindow.open(map, marker);
              });
            });
          });
        }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>

    <script src="markerclusterer.js"></script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=apiキー&callback=initMap">
    </script>

*************************************************


url2中の下記部分をどのように上記googledoc中のコードに入れればいいのかをご教示いただきたいです

*************************************************
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});

var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/example...});
}
**************************************************

よろしくお願いいたします。