Javascript 无法将API连接到Marker Clusterer和Google Maps API

我一直在阅读随附的简单示例和一些关于堆栈溢出的示例，但我不确定我做错了什么

我看到的其他示例使用json或HTML页面中内置的标记，但我从另一个API调用我的数据。当我试图修改我的页面以合并标记和其他API时，我通常会破坏我的页面

到目前为止，我在控制台中没有任何错误，但显然有些东西工作不正常

我做错了什么？谢谢你的帮助

HTML:

JavaScript:

var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers;

$(document).ready(function(){

//Construct the query string
url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?'
        + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';

function initialize() {
    var mapProp = {
        center:new google.maps.LatLng(39.003888,-77.105367),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.TERRAIN
    };




    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
//google.maps.event.addDomListener(window, 'load', initialize);

initialize();

//Retrieve our data and plot it
 $.getJSON(url, function(data, textstatus) {
      $.each(data, function(i, entry) {

        //Cluster Markers
          var markers = [];
          for (var i = 0; i < 100; i++ ) {
            var entryMarkers = entry[i];
            var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
                                               parseFloat(entry.coordinates.longitude));
          }

          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
                                               parseFloat(entry.coordinates.longitude)),
              map: map,
              title: entry.file_name
          });
          markers.push(marker);
      });
      var markerCluster = new MarkerClusterer(map, markers);
    });

});

var映射；
var-MarkerClusterer；
var标记；
var-mcOptions；
var标记；
$（文档）.ready（函数（）{
//构造查询字符串
url='1〕https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?'
+“$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX”；
函数初始化（）{
var mapProp={
中心：新google.maps.LatLng（39.003888，-77.105367），
缩放：5，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
}
//google.maps.event.addDomListener（窗口“加载”，初始化）；
初始化（）；
//检索数据并绘制它
$.getJSON（url、函数（数据、文本状态）{
$。每个（数据、函数（i、条目）{
//聚类标记
var标记=[]；
对于（变量i=0；i<100；i++）{
var entryMarkers=条目[i]；
var LatLng=new google.maps.LatLng（parseFloat（entry.coordinates.latitude），
parseFloat（entry.coordinates.longitude））；
}
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（parseFloat（entry.coordinates.latitude），
parseFloat（entry.coordinates.longitude）），
地图：地图，
标题：entry.file\u名称
});
标记器。推（标记器）；
});
var markerCluster=新的MarkerClusterer（地图、标记）；
});
});

您需要将所有标记放在一个数组中。现在，在创建每个标记之前，您正在清除标记数组。移动

var标记=[]每个$之外

//Retrieve our data and plot it
$.getJSON(url, function (data, textstatus) {
    //Cluster Markers
    var markers = [];
    $.each(data, function (i, entry) {


        for (var i = 0; i < 100; i++) {
            var entryMarkers = entry[i];
            var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
            parseFloat(entry.coordinates.longitude));
        }

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
            parseFloat(entry.coordinates.longitude)),
            // map: map,
            title: entry.file_name
        });
        markers.push(marker);
    });
    var markerCluster = new MarkerClusterer(map, markers);
});






页脚

I删除了
var标记=[]从$.getJSON开始，并在加载文档并运行之前将
=[]
添加到
var标记中。谢谢你介意告诉我在添加信息窗口时我做错了什么吗？我在传单上做过弹出窗口，但没有使用谷歌或集群标记插件。这是另一个问题。
var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers;

$(document).ready(function(){

//Construct the query string
url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?'
        + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';

function initialize() {
    var mapProp = {
        center:new google.maps.LatLng(39.003888,-77.105367),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.TERRAIN
    };




    map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
//google.maps.event.addDomListener(window, 'load', initialize);

initialize();

//Retrieve our data and plot it
 $.getJSON(url, function(data, textstatus) {
      $.each(data, function(i, entry) {

        //Cluster Markers
          var markers = [];
          for (var i = 0; i < 100; i++ ) {
            var entryMarkers = entry[i];
            var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
                                               parseFloat(entry.coordinates.longitude));
          }

          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude), 
                                               parseFloat(entry.coordinates.longitude)),
              map: map,
              title: entry.file_name
          });
          markers.push(marker);
      });
      var markerCluster = new MarkerClusterer(map, markers);
    });

});

//Retrieve our data and plot it
$.getJSON(url, function (data, textstatus) {
    //Cluster Markers
    var markers = [];
    $.each(data, function (i, entry) {


        for (var i = 0; i < 100; i++) {
            var entryMarkers = entry[i];
            var LatLng = new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
            parseFloat(entry.coordinates.longitude));
        }

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(parseFloat(entry.coordinates.latitude),
            parseFloat(entry.coordinates.longitude)),
            // map: map,
            title: entry.file_name
        });
        markers.push(marker);
    });
    var markerCluster = new MarkerClusterer(map, markers);
});