Marker Clusterer not Clustering/TypeError

Question

此問題屬於Google Maps Marker Clusterer。我不知道我的標記聚簇器的位置是否關閉，或者是什麼，但它不會通過。我收到錯誤：Uncaught TypeError: Can not read property of 'icon' of undefined. 當標記羣集代碼不到位時，此錯誤未通過。

頁面鏈接以供參考：http://exilebrewing.com/locations/

有誰知道爲什麼發生這種情況？任何見解都被讚賞！

<?php // Index template 
get_header(); ?> 


<div class="twelve column"> 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
     <div class="intro"> </div> 
     <?php the_content(); ?> 
     <div> 
     <header class="clearfix"></header> 
     <div id="mapcanvas"></div> 
    <?php 
     // For creating multiple, customized loops. 
     // http://codex.wordpress.org/Class_Reference/WP_Query 
     $custom_query = new WP_Query('post_type=locations'); // exclude category 9 
     while($custom_query->have_posts()) : $custom_query->the_post(); ?> 
     <?php if(get_field('link')): ?> 
      <div> 
       <?php while(has_sub_field('link')): ?> 
       <div> 
        <p><?php the_sub_field('url'); ?></p> 
       </div> 
       <?php endwhile; ?> 
      </div> 
      <?php endif; ?> 
     <?php endwhile; ?> 
     <?php wp_reset_postdata(); // reset the query ?> 
     <?php 
     function get_single_term($post_id, $taxonomy) 
     { 
      $terms = wp_get_object_terms($post_id, $taxonomy); 
      if(!is_wp_error($terms)) { 
      return '<a href="'.get_term_link($terms[0]->slug, $taxonomy).'">'.$terms[0]->name.'</a>'; 
      } 
     } 

     $i = 0; 

     // For creating multiple, customized loops. 
     // http://codex.wordpress.org/Class_Reference/WP_Query 
     $custom_query = new WP_Query('post_type=location&posts_per_page=-1'); 
     while($custom_query->have_posts()) : $custom_query->the_post(); 

      $title = get_the_title(); // Location title 
      $map = get_field('location'); // ACF location contains address and coordinates 
      $terms = strip_tags(get_the_term_list($post->ID, 'distributors', '', ' & ')); // Get distributor terms and rm links 
      $info = '<strong>' . $title . '</strong><br>' . $map['address']; // Info window content 
      $link = get_field('link'); 
      if($link){ 
      $info .= '<br><a href="http://'. $link .'">'. $link .'</a>'; 
      } 
      $location[$i][0] = $title; // Store the post title 
      $location[$i][1] = $map['coordinates']; // Store the ACF coordinates 
      $location[$i][2] = json_encode($info); // Store info window content 
      $location[$i][3] = strip_tags(get_single_term($post->ID, 'distributors')); // Get first term for marker icon 

      $i ++; 
     endwhile; ?> 
     <?php wp_reset_postdata(); // reset the query ?> 

     <script type="text/javascript"> 
      function initialize() { 
      var myLatLng = new google.maps.LatLng(41.583013,-93.63701500000002); 
      var bounds = new google.maps.LatLngBounds(); 
       var styles = [ 
       { 
       stylers: [ 
        { saturation: -99.9 } 
       ] 
       } 
      ]; 
      // Create a new StyledMapType object, passing it the array of styles, 
      // as well as the name to be displayed on the map type control. 
      var styledMap = new google.maps.StyledMapType(styles, {name: 'exile'}); 
      // Create a map object, and include the MapTypeId to add 
      // to the map type control. 
      var mapOptions = { 
       mapTypeId: 'roadmap', 
       center: myLatLng, 
       zoom: 14, 
       disableDefaultUI: false, 
       scrollwheel: true, 
       draggable: true 
      }; 
      // Display a map on the page 
       var map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions); 
       //var mc = new MarkerClusterer(map); 
       map.setTilt(45); 
       //Associate the styled map with the MapTypeId and set it to display. 
       map.mapTypes.set('exile', styledMap); 
       map.setMapTypeId('exile'); 
      // Marker icons 
       typeObject = { 
        "Others" : { 
        "icon" : new google.maps.MarkerImage('http://exilebrewing.com/site/img/beer-mug.png', new google.maps.Size(18,26), new google.maps.Point(0,0), new google.maps.Point(9,26)), 
        "shadow" : new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png', new google.maps.Size(40,34)) 
        } 

       } 

      var markers = [ 

      ]; 
      for (var i = 0; i < 100; i++) { 
      var dataPhoto = data.photos[i]; 
      var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude); 
      var marker = new google.maps.Marker({ 
       position: latLng 
      }); 
      markers.push(marker); 
      } 
      var markerCluster = new MarkerClusterer(map, markers); 


      // Info Window Content 
      var infoWindowContent = [ 
      ["<strong>Exile Brewing Co.</strong><br>1514 Walnut Street, Des Moines"], 
      <?php 
      if (count($location)>0) { 
       foreach ($location as $key => $value){ 
       if ($key < (count($location)-1)) { 
        echo '[' . $location[$key][2] . '], ' . "\n"; 
       } else { 
        echo '[' . $location[$key][2] . ']'; 
       } 
       } 
      } 
      ?> 
      ]; 


      // Display multiple markers on a map 
      var infoWindow = new google.maps.InfoWindow(), marker, i; 

     // Loop through our array of markers & place each one on the map 
     for(i = 0; i < markers.length; i++) { 
      var position = new google.maps.LatLng(markers[i][1], markers[i][2]); // ACF coordinates 
      var icon = typeObject[markers[i][3]]['icon']; 
      var shadow = typeObject[markers[i][3]]['shadow']; 
      bounds.extend(position); 
       marker = new google.maps.Marker({ 
       position: position, 
       map: map, 
       title: markers[i][0], 
       icon: icon, 
       shadow: shadow 
       }); 

      // Allow each marker to have an info window 
      google.maps.event.addListener(markers, 'click', (function(markers, i) { 
      return function() { 
       infoWindow.setContent(infoWindowContent[i][0]); 
       infoWindow.open(map, markers); 
      } 
      })(markers, i)); 
      // Automatically center the map fitting all markers on the screen 
      //map.fitBounds(bounds); 
      } 
      // Override our map zoom level once our fitBounds function runs (Make sure it only runs once) 
      var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
      this.setZoom(15); 
      google.maps.event.removeListener(boundsListener); 
      }); 
     }; 

     google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 

    <footer class="clearfix"></footer> 
<?php endwhile;?> 
<?php endif; ?> 
</div> 
</div> 

<?php get_footer(); ?> 

Answer 1

你推你google.maps.Markers到標記列陣（不是google.maps.Markers。MarkerClusterer預計google.maps.Markers的數組。

在全球範圍內：

var gmarkers = []; 

當您創建標記推到這個新的數組（不到標記數組的末尾）：

 var marker = new google.maps.Marker({ 
      position: latLng 
     }); 
     gmarkers.push(marker); 

使用新的數組初始化標記聚類器：

 var markerCluster = new MarkerClusterer(map, gmarkers);