###前提・実現したいこと
google maps apiを用いて施設検索できるコードを用いています。その検索結果をmarkerclustererでクラスタ化したいです。以下のリンク先のコードを使用しています。
リンク内容
###発生している問題・エラーメッセージ
公式で使われている以下のコードを使ってみたのですが、うまくいきません。挿入する場所が悪いのかも分かっていません。初心者で申し訳ないのですが、よろしくお願い致します。
(追記)施設検索の部分は動くのですが、検索結果がクラスタ化されません。
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
###該当のソースコード
```ここに言語を入力 <script> function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 35.0035315, lng: 135.7320783}, zoom: 13, mapTypeId: 'roadmap' }); // Create the search box and link it to the UI element. var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input); //マーカークラスタの文を挿入しています。 var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport. map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var markers = []; // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach(function(marker) { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { if (!place.geometry) { console.log("Returned place contains no geometry"); return; } var icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; // Create a marker for each place. markers.push(new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); } </script>
###試したこと
課題に対してアプローチしたことを記載してください
var markerClusterを使ってみたのですが、クラスタ化されません。
回答1件
あなたの回答
tips
プレビュー