Google maps apiでの検索結果をクラスタ化したい

Question

###前提・実現したいこと
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を使ってみたのですが、クラスタ化されません。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

[nwr]

直せたと思います。ご指摘ありがとうございます。

[kei344]

MarkerClustererは提示のコードの中に記述されていませんが、どういうコードを書いているかを提示されたほうが良いと思います。

[Lhankor_Mhy]

実際に動かなかったコードをご提示ください。

Answer 1

var markerCluster = new MarkerClusterer(map, markers,

ここで、変数markersが使われていますが、この行が実行されている段階では値が入っていないことが原因かと思います。

Comments

[nwr]

ありがとうございます!挿入する場所を変更したところクラスタ化できました!!ありがとうございました。