Php 谷歌地图标记聚类器

我在Wordpress上使用谷歌地图集群器和谷歌地图API。我试图将两者结合起来，每次都得到不同的结果。当我定义我的标记时，地图将在没有标记聚类器的情况下显示它们。当我不定义标记时，地图将显示以下示例中的标记簇：

知道我做错了什么吗？感谢您的帮助

这是我的密码：

<?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>
<script src="<?php echo get_template_directory_uri(); ?>/js/data.json"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/markerclusterer.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/markerclusterer_compiled.js"></script>


<div class="twelve column">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="intro">
            </div>
            <?php the_content(); ?>
            <header class="clearfix"></header>

                <style type="text/css">
                      body {
                        margin: 0;
                        padding: 10px 20px 20px;
                        font-family: Arial;
                        font-size: 16px;
                      }

                      #map-container {
                        padding: 6px;
                        border-width: 1px;
                        border-style: solid;
                        border-color: #ccc #ccc #999 #ccc;
                        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
                        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
                        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
                        width: 600px;
                      }

                      #map {
                        width: 600px;
                        height: 400px;
                      }

                    </style>

                    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
                    <script type="text/javascript" src="../src/data.json"></script>
                    <script type="text/javascript">
                      var script = '<script type="text/javascript" src="../src/markerclusterer';
                      if (document.location.search.indexOf('compiled') !== -1) {
                        script += '_compiled';
                      }
                      script += '.js"><' + '/script>';
                      document.write(script);
                    </script>
                   <?php //Where WP Content Might Go? ?>    
                   <?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 }
                                ]
                              }
                            ];
                        var styledMap = new google.maps.StyledMapType(styles, {name: 'exile'});
                            var mapOptions = {
                              mapTypeId: 'roadmap',
                              center: myLatLng,
                              zoom: 3,
                              disableDefaultUI: false,
                              scrollwheel: true,
                              draggable: true
                            };
                        // Display a map on the page        
                        var map = new google.maps.Map(document.getElementById('map'), 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 = [
                        ["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] . '"]';
                              }
                            }
                          }
                          ?>
                        ];
                        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>

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

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

<?php get_footer(); ?>

函数初始化（）{
var mylatng=new google.maps.LatLng（41.583013，-93.63701500000002）；
var bounds=new google.maps.LatLngBounds（）；
变量样式=[
{
样式：[
{饱和度：-99.9}
]
}
];
var styledMap=new google.maps.StyledMapType（styles，{name:'facio'}）；
变量映射选项={
mapTypeId:“路线图”，
中心：myLatLng，
缩放：3，
disableDefaultUI:false，
滚轮：对，
德拉格布尔：是的
};
//在页面上显示地图
var map=new google.maps.map（document.getElementById（'map'），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)
}
}     
变量标记=[
[“流放酿酒公司”，41.583013，-93.63701500000002，“其他”]，
];
对于（变量i=0；i<100；i++）{
var dataPhoto=data.photos[i]；
var latLng=新的google.maps.latLng（dataPhoto.latitude，
经度）；
var marker=new google.maps.marker({
职位：latLng
});
标记器。推（标记器）；
}
var markerCluster=新的MarkerClusterer（地图、标记）；
//信息窗口内容
var infoWindowContent=[
[“流放酿酒公司”
得梅因胡桃街1514号”，
];
//在地图上显示多个标记
var infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i