前提・実現したいこと
google maps apiを使った多店舗情報サイトを作成しようとしています。
データはmysqlに格納しております。
Google マップで MySQL と PHP を使用する | Google Maps JavaScript API | Google Developers - https://developers.google.com/maps/documentation/javascript/mysql-to-maps?hl=ja
上記を参照し、mysql+phpでデータを取得し、全件のマーカーを表示させるところまではできました。
この後マーカーにクラスタリングを行いたいのですが、そこで詰まっています。
該当のソースコード
<!DOCTYPE html > <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Using MySQL and PHP with Google Maps</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var customLabel = { restaurant: { label: 'R' }, bar: { label: 'B' } }; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(-33.863276, 151.207977), zoom: 12 }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP or XML file downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', 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 point = new google.maps.LatLng( parseFloat(markerElem.getAttribute('lat')), parseFloat(markerElem.getAttribute('lng'))); var infowincontent = document.createElement('div'); var strong = document.createElement('strong'); strong.textContent = name infowincontent.appendChild(strong); infowincontent.appendChild(document.createElement('br')); var text = document.createElement('text'); text.textContent = address infowincontent.appendChild(text); var icon = customLabel[type] || {}; var marker = new google.maps.Marker({ map: map, position: point, label: icon.label }); marker.addListener('click', function() { infoWindow.setContent(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 async defer src="https://maps.googleapis.com/maps/api/js?key=apikey&callback=initMap"> </script> </body> </html>
マーカー クラスタリング | Google Maps JavaScript API | Google Developers - https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=ja
Google Map と MarkerClusterer でまとめ表示 ( JavaScript) | バシャログ。 - http://bashalog.c-brains.jp/17/10/31-204633.php
上記などを参考にして、まずマーカーの位置データを配列化し、MarkerClustererに渡さなければならないということまでは分かったのですが、該当コードの書き方が分かりません。
ご教示いただけるとありがたいです。
https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=ja
このURL中で言うところの
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/examples/markerclusterer/m'}); }
上記のmarkerclusterer.js、およびクラスタ画像ファイルの配置・指定はできております。
こちらについても教えていただけるとありがたいです。
どうぞよろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。