Javascript 在谷歌地图中显示许多标记

我有这张地图，想展示一大堆标记。但我需要找到一种有序展示的方式，而且。。。来点酷的就好了。好消息是谷歌地图有很多很酷的功能。但我对它的使用还不熟悉，而且很可能不知道组织标记和内容的很酷的选项。我只是偶然发现了一个简洁的方法，我将在下面发布

---

但为了了解其他人发现/创建的解决方案，我的问题是：显示大量标记的酷方法是什么？

这是一个外观非常奇特但相对容易编写的示例，它让我发布了这条消息

，基于

---

功能：当您将鼠标悬停在外部区域上时，会自动滚动，其中包含有关地图中内容的详细信息。允许您发布和显示更多信息，但仍将其与地图关联

以下是有关

检查示例

它可以以更容易查看的方式对标记进行分组

下面是一个使用MarkerClusterer的示例

var-map=null；
var-markerary=[]//创建全局数组以存储标记
var myPoints=[[43.6565654，-79.90138，'ABC']，[43.91892，-78.89231，'DEF']，[43.82589，-79.10040，'GHA']//创建全局数组以存储点
函数初始化（）{
变量myOptions={
缩放：8，
中心：新google.maps.LatLng（43.907787，-79.359741），
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
变量mcOptions={
网格大小：50，
最大缩放：15
};
var mc=新的MarkerClusterer（映射，[]，mcOptions）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
//向地图添加标记
//根据myPoints数组中的元素数设置标记
对于（var i=0；i可能这个问题与您的相关：文档链接是404'ing。文档/示例链接分别是：（我没有看到公共示例页面，只是一个GitHub）
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']];  //create global array to store points

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 50,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for(var i=0; i<myPoints.length; i++){
         createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
    }

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red10.png',
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    marker.setAnimation(google.maps.Animation.BOUNCE);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

window.onload = initialize;