Wordpress 谷歌地图标记集群是'；行不通

为了我的生命，我不能让这个工作。我正试图将标记聚类器传递到我的谷歌地图，但它不起作用。我已经通过谷歌地图API建立了这张地图，它是为Wordpress网站准备的。用户可以使用自定义帖子类型添加位置。在附近有很多位置，所以我试着用MarkerCluster来稍微亮一点。我以前从未使用过MarkerCluster，所以它也可能是一件小事。。。不确定。 'var mc=new MarkerClusterer（map）；'--这将导致错误：“未捕获引用错误：未定义MarkerClusterer”

有什么见解吗？非常感谢您的帮助

<?php // Index template
get_header(); ?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>




<div class="twelve column">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

            <div class="intro">
                <?php the_excerpt(); ?>
                <hr>
            </div>

                <?php the_content(); ?>

                <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>
                                $(function initialize() {
                                geocoder = new google.maps.Geocoder();
                                  // Center map on our main location
                                  var myLatLng = new google.maps.LatLng(41.583013,-93.63701500000002);
                                  var bounds = new google.maps.LatLngBounds();

                                  // https://developers.google.com/maps/documentation/javascript/styling
                                  // Create an array of styles.
                                  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))
                                    }
                                  }

                                  // http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
                                  // Multiple Markers
                                  var markers = [
                                    ["Exile Brewing Co", 41.583013,-93.63701500000002,"Others"],
                                    <?php
                                    if (count($location)>0) {
                                      foreach ($location as $key => $value){
                                        if ($key < (count($location)-1)){
                                          echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"], ' . "\n";
                                        } else {
                                          echo '["' . $location[$key][0] . '",' . $location[$key][1] . ',"' . $location[$key][3] . '"]';
                                        }
                                      }
                                    }
                                    ?>
                                  ];
                                  var markers = [];
                                  for (var i = 0; i < 100; i++) {
                                    var latLng = new google.maps.LatLng(data.photos[i].latitude,
                                        data.photos[i].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(marker, 'click', (function(marker, i) {
                                      return function() {
                                        infoWindow.setContent(infoWindowContent[i][0]);
                                        infoWindow.open(map, marker);
                                      }
                                    })(marker, 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);
                                  });

                                });
                                </script>

                                <div id="map-canvas"></div>


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

<?php get_footer(); ?>

$（函数初始化（）{
geocoder=新的google.maps.geocoder（）；
//我们主要位置的中心地图
var mylatng=new google.maps.LatLng（41.583013，-93.63701500000002）；
var bounds=new google.maps.LatLngBounds（）；
// https://developers.google.com/maps/documentation/javascript/styling
//创建样式数组。
变量样式=[
{
样式：[
{饱和度：-99.9}
]
}
];
//创建一个新的StyledMapType对象，将样式数组传递给它，
//以及要显示在地图类型控件上的名称。
var styledMap=new google.maps.StyledMapType（styles，{name:'facio'}）；
//创建地图对象，并包括要添加的MapTypeId
//到映射类型控件。
变量映射选项={
mapTypeId:“路线图”，
中心：myLatLng，
缩放：14，
disableDefaultUI:false，
滚轮：对，
德拉格布尔：是的
};
//在页面上显示地图
var map=new google.maps.map（document.getElementById（“mapcanvas”）、mapOptions）；
var mc=新的标记聚类器（map）；
地图.设置倾斜（45）；
//将样式化映射与MapTypeId关联，并将其设置为显示。
map.mapTypes.set（'floatie'，styledMap）；
map.setMapTypeId（‘流放’）；
//标记图标
类型对象={
“其他”：{
“图标”：新的google.maps.MarkerImage（'http://exilebrewing.com/site/img/beer-mug.png，新google.maps.Size（18,26），新google.maps.Point（0,0），新google.maps.Point（9,26）），
“影子”：新的google.maps.MarkerImage（'http://maps.google.com/mapfiles/shadow50.png",新google.maps.Size(40,34)
}
}
// http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/
//多重标记
变量标记=[
[“流放酿酒公司”，41.583013，-93.63701500000002，“其他”]，
];
var标记=[]；
对于（变量i=0；i<100；i++）{
var latLng=new google.maps.latLng（data.photos[i].latitude，
数据。照片[i]。经度）；
var marker=new google.maps.marker（{'position'：latLng}）；
标记器。推（标记器）；
}
var markerCluster=新的MarkerClusterer（地图、标记）；
//信息窗口内容
var infoWindowContent=[
[“流放酿酒公司”
得梅因胡桃街1514号”，
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i    <script src="/path/to/markerclusterer.js" type="text/javascript"></script>

  <script src="markerclusterer.js" type="text/javascript"></script>

wp_register_script( 'js_marker_clusterer', plugins_url( '/scripts/MarkerClusterer.js', __FILE__ ),'jquery' ); // or other dependencies descendents - preferably map JS or your custom.
wp_enqueue_script('js_marker_clusterer');