Php 如何将MarkerClusterer添加到我的谷歌地图

我正试图将谷歌集群添加到我的地图中，但我不知道该怎么做？我已经使用php中的mysql查询创建了地图及其带有信息框的标记。我知道我正在添加更多标记，它们重叠在一起，所以我需要添加cluster命令，但我无法让它工作。我的代码在下面

<script>
$(document).ready(function() {


    //------- Google Maps ---------//

    // Creating a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(53.0,0);

    // Creating an object literal containing the properties we want to pass to the map  
    var options = {  
        zoom: 5, // This number can be set to define the initial zoom level of the map
        center: latlng,
        disableDefaultUI: true,
        panControl: false,
        zoomControl: true,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
            styles: [
  {
    "featureType": "landscape.natural",
    "stylers": [
      { "visibility": "simplified" },
      { "color": "#07c6ee" }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "on" },
      { "hue": "#6e00ff" },
      { "gamma": 1.96 },
      { "lightness": 18 },
      { "saturation": -78 },
      { "color": "#46fcb3" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "simplified" },
      { "color": "#f9ec55" }
    ]
  },{
  },{
    "featureType": "road.highway",
    "stylers": [
      { "visibility": "on" },
      { "color": "#7b8080" }
    ]
  },{
    "featureType": "road.arterial",
    "stylers": [
      { "visibility": "on" },
      { "color": "#808080" }
    ]
  },{
    "featureType": "road.local",
    "stylers": [
      { "color": "#808080" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#fefffe" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.highway",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
  }
] 
    };  
    // Calling the constructor, thereby initializing the map  
    var map = new google.maps.Map(document.getElementById('map_div'), options);  

    // Define Marker properties
    var image1 = new google.maps.MarkerImage('http://www.foodhawkers.co.uk/images/map-market.png',
        // This marker is 129 pixels wide by 42 pixels tall.
        new google.maps.Size(40, 40),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 18,42.
        new google.maps.Point(40, 40)
    );


    //


    // Add Marker



    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(51.4636101,-0.1382557), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker1, 'click', function() {  
        infowindow1.open(map, marker1);  
    });

    // Add information window
    var infowindow1 = new google.maps.InfoWindow({  
        content:  createInfo('Venn Street Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/venn-street-market" title="Click to view Venn Street Market" target="_parent">View profile</a>')
    }); 




    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(51.5367954,-0.0618898), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker2, 'click', function() {  
        infowindow2.open(map, marker2);  
    });

    // Add information window
    var infowindow2 = new google.maps.InfoWindow({  
        content:  createInfo('Broadway Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/broadway-market" title="Click to view Broadway Market" target="_parent">View profile</a>')
    }); 




    var marker3 = new google.maps.Marker({
        position: new google.maps.LatLng(51.4721386,-2.7580983), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker3, 'click', function() {  
        infowindow3.open(map, marker3);  
    });

    // Add information window
    var infowindow3 = new google.maps.InfoWindow({  
        content:  createInfo('StrEAT Food Market', '<div style="width:200px">We\'re really hoping to be doing some amazing street food nights in the CENTRE of...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/streat-food-market" title="Click to view StrEAT Food Market" target="_parent">View profile</a>')
    }); 




    var marker4 = new google.maps.Marker({
        position: new google.maps.LatLng(51.5945845,-0.1302629), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker4, 'click', function() {  
        infowindow4.open(map, marker4);  
    });

    // Add information window
    var infowindow4 = new google.maps.InfoWindow({  
        content:  createInfo('Alexandra Palace Farmers Market', '<div style="width:200px">Sundays 10:00 - 15:00...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/alexandra-palace-farmers-market" title="Click to view Alexandra Palace Farmers Market" target="_parent">View profile</a>')
    }); 




    var marker5 = new google.maps.Marker({
        position: new google.maps.LatLng(51.5050824,-0.0900808), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker5, 'click', function() {  
        infowindow5.open(map, marker5);  
    });

    // Add information window
    var infowindow5 = new google.maps.InfoWindow({  
        content:  createInfo('Borough Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/borough-market" title="Click to view Borough Market" target="_parent">View profile</a>')
    }); 




    var marker6 = new google.maps.Marker({
        position: new google.maps.LatLng(51.5057757,-0.1168251), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker6, 'click', function() {  
        infowindow6.open(map, marker6);  
    });

    // Add information window
    var infowindow6 = new google.maps.InfoWindow({  
        content:  createInfo('The Real Food Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/the-real-food-market" title="Click to view The Real Food Market" target="_parent">View profile</a>')
    }); 




    var marker7 = new google.maps.Marker({
        position: new google.maps.LatLng(51.5005095,-0.1131232), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker7, 'click', function() {  
        infowindow7.open(map, marker7);  
    });

    // Add information window
    var infowindow7 = new google.maps.InfoWindow({  
        content:  createInfo('Lower Marsh Market', '<div style="width:200px">Lower Marsh is steeped in history as one of London’s oldest and best-loved market streets....</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/lower-marsh-market" title="Click to view Lower Marsh Market" target="_parent">View profile</a>')
    }); 




    var marker8 = new google.maps.Marker({
        position: new google.maps.LatLng(51.4682204,-0.0259369), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker8, 'click', function() {  
        infowindow8.open(map, marker8);  
    });

    // Add information window
    var infowindow8 = new google.maps.InfoWindow({  
        content:  createInfo('Brockley Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/brockley-market" title="Click to view Brockley Market" target="_parent">View profile</a>')
    }); 




    var marker9 = new google.maps.Marker({
        position: new google.maps.LatLng(51.4528397,-0.1019773), 
        map: map,       
        icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker9, 'click', function() {  
        infowindow9.open(map, marker9);  
    });

    // Add information window
    var infowindow9 = new google.maps.InfoWindow({  
        content:  createInfo('Herne Hill Farmers Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/herne-hill-farmers-market" title="Click to view Herne Hill Farmers Market" target="_parent">View profile</a>')
    }); 




     var markerCluster = new MarkerClusterer(options, markers);


    // Create information window
    function createInfo(title, content) {
        return '<div class="infowindow"><strong>'+ title +'</strong><br />'+content+'</div>';
    } 

});


</script>

$（文档）.ready（函数（）{
//-------谷歌地图---------//
//创建包含地图中心坐标的板条对象
var latlng=新的google.maps.latlng（53.0,0）；
//创建包含要传递给映射的属性的对象文字
变量选项={
缩放：5，//此数字可设置为定义地图的初始缩放级别
中心：拉特林，
disableDefaultUI:true，
泛控制：错误，
动物控制：对，
scaleControl：对，
mapTypeId:google.maps.mapTypeId.ROADMAP，//此值可设置为定义地图类型ROADMAP/SATELLITE/HYBRID/TERRAIN
风格：[
{
“特色类型”：“景观。自然”，
“造型师”：[
{“可见性”：“简化”}，
{“颜色”：“#07c6ee”}
]
},{
“特色类型”：“景观。人造”，
“造型师”：[
{“可见性”：“在”}，
{“色调”：“#6e00ff”}，
{“gamma”：1.96}，
{“轻盈”：18}，
{“饱和”：-78}，
{“颜色”：“#46fcb3”}
]
},{
“功能类型”：“水”，
“造型师”：[
{“可见性”：“简化”}，
{“颜色”：“#f9ec55”}
]
},{
},{
“功能类型”：“道路.公路”，
“造型师”：[
{“可见性”：“在”}，
{“颜色”：“#7b8080”}
]
},{
“功能类型”：“道路干线”，
“造型师”：[
{“可见性”：“在”}，
{“颜色”：“#808080”}
]
},{
“功能类型”：“road.local”，
“造型师”：[
{“颜色”：“#808080”}，
{“可见性”：“在”}
]
},{
“功能类型”：“道路”，
“elementType”：“labels.text.fill”，
“造型师”：[
{“颜色”：“#fefffe”}，
{“可见性”：“在”}
]
},{
“特色类型”：“景观。人造”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“功能类型”：“道路.公路”，
“elementType”：“labels.icon”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
“featureType”：“poi”，
“造型师”：[
{“可见性”：“关闭”}
]
},{
}
] 
};  
//调用构造函数，从而初始化映射
var map=new google.maps.map（document.getElementById（'map\u div'），options）；
//定义标记属性
var image1=new google.maps.MarkerImage（'http://www.foodhawkers.co.uk/images/map-market.png',
//该标记宽129像素，高42像素。
新google.maps.Size（40,40），
//此图像的原点为0,0。
新google.maps.Point（0,0），
//这张图片的锚定点是18,42处旗杆的底部。
新google.maps.Point（40,40）
);
//
//添加标记
var marker1=新的google.maps.Marker({
位置：新google.maps.LatLng（51.4636101，-0.1382557），
地图：地图，
图标：image1//此路径是要显示的自定义pin。删除此行和继续使用的逗号以使用默认pin
}); 
//添加侦听器以单击pin
google.maps.event.addListener（marker1，'click'，function（）{
信息窗口1.打开（地图，标记1）；
});
//添加信息窗口
var infowindow1=新的google.maps.InfoWindow（{
内容：createInfo（'Venn Street Market'，'…


}); 
var marker2=新的google.maps.Marker({
位置：新google.maps.LatLng（51.5367954，-0.0618898），
地图：地图，
图标：image1//此路径是要显示的自定义pin。删除此行和继续使用的逗号以使用默认pin
}); 
//添加侦听器以单击pin
google.maps.event.addListener（marker2，'click'，function（）{
信息窗口2.打开（地图、标记2）；
});
//添加信息窗口
var infowindow2=新的google.maps.InfoWindow（{
内容：createInfo（‘百老汇市场’，“…

”）
}); 
var marker3=新的google.maps.Marker({
位置：新google.maps.LatLng（51.4721386，-2.7580983），
地图：地图，
图标：image1//此路径是要显示的自定义pin。删除此行和继续使用的逗号以使用默认pin
}); 
//添加侦听器以单击pin
google.maps.event.addListener（marker3，'click'，function（）{
信息窗口3.打开（地图、标记3）；
});
//添加信息窗口
var infowindow3=新的google.maps.InfoWindow（{
内容：createInfo（“StrEAT Food Market”，“我们真的希望能在……的中心举办一些令人惊叹的街头美食之夜”）
}); 
var marker4=新的google.maps.Marker({
位置：新google.maps.LatLng（51.5945845，-0.1302629），
地图：地图，
图标：image1//此路径是要显示的自定义pin。删除此行和继续使用的逗号以使用默认pin
}); 
//添加侦听器以单击pin
google.maps.event.addListener（marker4，'click'，function（）{
信息窗口4.打开（地图、标记4）；
});
//添加信息窗口
var infowindow4=新的google.maps.InfoWindow（{
内容：createInfo（'Alexandra Palace Farmers Market'，'Sundays 10:00-15:00…

）
}); 
var marker5=新的google.maps.Marker({
位置：new google.maps.LatLng（51.5050824，-0.0900808），
地图：地图，
图标：image1//此路径是要显示的自定义pin。删除此行和继续使用的逗号以使用默认pin
}); 
//添加侦听器以单击pin
google.maps.event.addListener（marker5，'click'，function（）{
信息窗口5.打开（地图、标记5）；
});
//添加信息窗口
var infowindow5=新的google.maps.InfoWindow（{
孔蒂
var markerCluster = new MarkerClusterer(map, opt_markers, opt_options);

var markerCluster = new MarkerClusterer(map);
markerCluster.addMarker(marker1);
...
markerCluster.addMarker(marker9);

var markers = [];

markers.push(markerN);

markerCluster.addMarkers(markers);