settingsログイン
メニュー

GoogleMapsAPI のクラスタリングについて mysqlからデータを取得した場合

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

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

url1. 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...});
}
**************************************************

よろしくお願いいたします。
kondou 2018 2/24 質問 JavaScript

ログインまたはユーザー登録してから回答してください。

プログラミング・開発言語、JavaScript の企業/事業者/教室/プロの方のホームページの集客、アクセスアップ、SEO対策効果が期待できるリスティングサイト=Ask-itをぜひご活用ください

Ask IT にようこそ。ここではコミュニティメンバーに質問したり、回答を得ることができます。
ITについて質問したい方へ ITについてプロに質問したい方は会員登録後すぐに質問をする事ができます。

プロフェッショナルの方へ 質問に答えていただけるプロフェッショナルの方は下記をご覧下さい

お気づきの点があれば是非お知らせください
...