小开

最佳答案

这是最简单的我可以减少到：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>


<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
    

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
    

var infowindow = new google.maps.InfoWindow();


var marker, i;
    

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
      

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>

👨‍💻在CoDepen上编辑/分叉→

截屏

谷歌地图多个标记

当将回调参数传递给addListener方法时，会发生一些闭包魔法。如果您不熟悉闭包的工作原理，这可能是一个相当棘手的话题。如果是这样，我建议查看以下Mozilla文章以获得简要介绍：

Mozilla开发中心：使用闭包

小开

来自谷歌地图API示例：

function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);


setMarkers(map, beaches);
}


/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];


function setMarkers(map, locations) {
// Add markers to the map


// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.


// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// 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 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}

小开

这是另一个使用唯一的title和infoWindow文本加载多个标记的示例。使用最新的谷歌地图API V3.11进行了测试。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Multiple Markers Google Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false"
type="text/javascript"
></script>
<script type="text/javascript">
// check DOM Ready
$(document).ready(function () {
// execute
(function () {
// map options
var options = {
zoom: 5,
center: new google.maps.LatLng(39.909736, -98.522109), // centered US
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false,
};


// init map
var map = new google.maps.Map(
document.getElementById('map_canvas'),
options
);


// NY and CA sample Lat / Lng
var southWest = new google.maps.LatLng(40.744656, -74.005966);
var northEast = new google.maps.LatLng(34.052234, -118.243685);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();


// set multiple marker
for (var i = 0; i < 250; i++) {
// init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(
southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()
),
map: map,
title: 'Click Me ' + i,
});


// process multiple info windows
(function (marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function () {
infowindow = new google.maps.InfoWindow({
content: 'Hello, World!!',
});
infowindow.open(map, marker);
});
})(marker, i);
}
})();
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 800px; height: 500px"></div>
</body>
</html>

250个标记的截图：

带有多个标记的Google Maps API V3.11

它将自动随机化Lat/Lng以使其独特。如果您想测试500、1000、xxx标记和性能，此示例将非常有用。

小开

这是工作示例地图图像

var arr = new Array();
function initialize() {
var i;
var Locations = [
{
lat:48.856614,
lon:2.3522219000000177,
address:'Paris',
gval:'25.5',
aType:'Non-Commodity',
title:'Paris',
descr:'Paris'
},
{
lat: 55.7512419,
lon: 37.6184217,
address:'Moscow',
gval:'11.5',
aType:'Non-Commodity',
title:'Moscow',
descr:'Moscow Airport'
},


{
lat:-9.481553000000002,
lon:147.190242,
address:'Port Moresby',
gval:'1',
aType:'Oil',
title:'Papua New Guinea',
descr:'Papua New Guinea 123123123'
},
{
lat:20.5200,
lon:77.7500,
address:'Indore',
gval:'1',
aType:'Oil',
title:'Indore, India',
descr:'Airport India'
}
];


var myOptions = {
zoom: 2,
center: new google.maps.LatLng(51.9000,8.4731),
mapTypeId: google.maps.MapTypeId.ROADMAP
};


var map = new google.maps.Map(document.getElementById("map"), myOptions);


var infowindow =  new google.maps.InfoWindow({
content: ''
});


for (i = 0; i < Locations.length; i++) {
size=15;
var img=new google.maps.MarkerImage('marker.png',
new google.maps.Size(size, size),
new google.maps.Point(0,0),
new google.maps.Point(size/2, size/2)
);


var marker = new google.maps.Marker({
map: map,
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
icon: img
});


bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);


}


}


function bindInfoWindow(marker, map, infowindow, html, Ltitle) {
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(html);
infowindow.open(map, marker);


});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();


});
}

完整的工作示例。您可以复制、粘贴和使用。

小开

我想我会把这个放在这里，因为对于那些开始使用谷歌地图API的人来说，它似乎是一个受欢迎的着陆点。在客户端呈现的多个标记可能是许多地图应用程序性能方面的失败。很难进行基准测试、修复，在某些情况下甚至确定存在问题（由于浏览器实现差异、客户端可用的硬件、移动设备，等等）。

开始解决这个问题的最简单方法是使用标记聚类解决方案。基本思想是将地理上相似的位置分组为一组，并显示点数。当用户放大地图时，这些组会扩展以显示下面的单个标记。

也许最简单的实现是分类器库。基本实现如下（库导入后）：

<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);


var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});


var markers = [];
for (var i = 0; i < 100; i++) {
var location = yourData.location[i];
var latLng = new google.maps.LatLng(location.latitude,
location.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer({map, markers});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

标记不是直接添加到地图中，而是添加到数组中。然后，该数组被传递到为您处理复杂计算的库并附加到地图上。

这些实现不仅大大提高了客户端的性能，而且在许多情况下还导致更简单、更不杂乱的UI以及更容易在更大规模上消化数据。

其他实现可从Google获得。

希望这有助于一些新的映射的细微差别。

小开

异步版本：

<script type="text/javascript">
function initialize() {
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];


var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});


var infowindow = new google.maps.InfoWindow();


var marker, i;


for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});


google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}


function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
'callback=initialize';
document.body.appendChild(script);
}


window.onload = loadScript;
</script>

小开

这是我为节省地图空间而编写的另一个版本，它将infowindow指针放在标记的实际纬度和长上，同时在显示infowindow时暂时隐藏标记。

它还取消了标准的“标记”分配并加快了速度通过在标记创建时直接将新标记分配给标记数组来处理。然而，请注意，额外的属性已经添加到标记和信息索引中，所以这种方法有点非常规…但那就是我！

在这些infowindow问题中从未提到标准infowindow不是放置在标记点的lat和lng，而是放置在标记图像的顶部。标记可见性必须隐藏才能正常工作，否则Maps API将再次将infowindow锚点推回到标记图像的顶部。

对“标记”数组中标记的引用在标记声明后立即创建，用于以后可能需要的任何其他处理任务（隐藏/显示、抓取坐标等…）。这节省了将标记对象分配给“标记”的额外步骤，然后将“标记”推送到标记数组…我的书中有很多不必要的处理。

不管怎样，对信息的不同看法是，希望它有助于告知和激励你。

    var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map;
var markers = [];


function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});


var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
});


google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}


google.maps.event.addDomListener(window, 'load', init);

这是一个工作JSFiddle

附加说明
你会注意到在这个给定的Google示例数据中，“位置”数组中的第四个位置带有一个数字。在示例中，你也可以将此值用于标记ID来代替当前循环值，这样…

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: locations[i][3],
});
};

小开

从Daniel Vassallo的回答开始，这是一个以更简单的方式处理闭包问题的版本。

由于所有标记都将有一个单独的信息窗，并且由于JavaScript不关心您是否向对象添加额外的属性，因此您需要做的就是将信息窗添加到马克的属性，然后从自身调用信息窗上的.open()！

编辑：有了足够的数据，页面加载可能会花费很多时间，因此不应使用标记构造信息窗，而应仅在需要时进行构造。请注意，用于构造信息窗的任何数据都必须作为属性（data）附加到标记。另请注意，在第一次单击事件之后，infoWindow将作为其标记的属性持久化，因此浏览器不需要不断重建。

var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];


var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-33.92, 151.25)
});


for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
data: {
name: locations[i][0]
}
});
marker.addListener('click', function() {
if(!this.infoWindow) {
this.infoWindow = new google.maps.InfoWindow({
content: this.data.name;
});
}
this.infoWindow.open(map,this);
})
}

小开

这是一个几乎完整的示例javascript函数，它允许在JSONObject中定义多个标记。

它只会显示地图边界中的标记。

这很重要，所以你不会做额外的工作。

您还可以设置标记的限制，这样您就不会显示极端数量的标记（如果您的使用中存在某种可能性）；

如果地图的中心没有改变超过500米，它也不会显示标记。
这很重要，因为如果用户单击标记并在这样做时意外拖动地图，您不希望地图重新加载标记。

我将此函数附加到map的空闲事件侦听器，以便仅在map空闲时显示标记，并在不同的事件之后重新显示标记。

在行动屏幕截图屏幕截图有一点变化，显示了信息窗口中的更多内容。 pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

小开

接受答案，用ES6重写：

$(document).ready(() => {
const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');


// Display a map on the page
const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });


const buildings = [
{
title: 'London Eye, London',
coordinates: [51.503454, -0.119562],
info: 'carousel'
},
{
title: 'Palace of Westminster, London',
coordinates: [51.499633, -0.124755],
info: 'palace'
}
];


placeBuildingsOnMap(buildings, map);
});




const placeBuildingsOnMap = (buildings, map) => {
// Loop through our array of buildings & place each one on the map
const bounds = new google.maps.LatLngBounds();
buildings.forEach((building) => {
const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
// Stretch our bounds to the newly found marker position
bounds.extend(position);


const marker = new google.maps.Marker({
position: position,
map: map,
title: building.title
});


const infoWindow = new google.maps.InfoWindow();
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', () => {
infoWindow.setContent(building.info);
infoWindow.open(map, marker);
})


// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
})
})

小开

在您的程序中添加标记非常容易。您只需添加以下代码：

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});

以下字段特别重要，并且在您构造标记时通常设置：

position（必需）指定标识标记初始位置的LatLng。检索LatLng的一种方法是使用地理编码服务。
map（可选）指定要放置标记的地图。如果您在构建标记时没有指定地图，则会创建标记，但不会附加到（或显示在）地图上。您可以稍后通过调用标记的setMap()方法添加标记。

说明，在示例中，title字段设置标记的标题，谁将显示为工具提示。

您可以参考Google api文档这里。

这是在地图中设置一个标记的完整示例。小心，您必须将YOUR_API_KEY替换为google api key：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>


function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};


var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});


var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

现在，如果你想在map中绘制数组的标记，你应该这样做：

var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];


function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};


var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});


var count;


for (count = 0; count < locations.length; count++) {
new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map,
title: locations[count][0]
});
}
}

这个例子给我以下结果：

您还可以在引脚中添加一个infoWindow。你只需要以下代码：

var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});


marker.info = new google.maps.InfoWindow({
content: 'Hello World!'
});

您可以在Google留档关于infoWindows这里。

现在，我们可以在标记为“clik”时打开infoWindow，如下所示：

var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});


marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});




google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});

说明，你可以留档一些关于Listener这里在谷歌开发者。

最后，如果用户单击它，我们可以在标记中绘制一个infoWindow。这是我的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>


var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];




// When the user clicks the marker, an info window opens.


function initMap() {
var myLatLng = {lat: -33.90, lng: 151.16};


var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});


var count=0;




for (count = 0; count < locations.length; count++) {


var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[count][1], locations[count][2]),
map: map
});


marker.info = new google.maps.InfoWindow({
content: locations [count][0]
});




google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>

通常，你应该得到这样的结果：

小开

Source链接

演示链接

完整的超文本标记语言代码

在单击或悬停时显示InfoWindow。
将只显示一个InfoWindow

    <!DOCTYPE html>
<html>


<head>
<style>
/*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
<script>
var map;
var InforObj = [];
var centerCords = {
lat: -25.344,
lng: 131.036
};
var markersOnMap = [{
placeName: "Australia (Uluru)",
LatLng: [{
lat: -25.344,
lng: 131.036
}]
},
{
placeName: "Australia (Melbourne)",
LatLng: [{
lat: -37.852086,
lng: 504.985963
}]
},
{
placeName: "Australia (Canberra)",
LatLng: [{
lat: -35.299085,
lng: 509.109615
}]
},
{
placeName: "Australia (Gold Coast)",
LatLng: [{
lat: -28.013044,
lng: 513.425586
}]
},
{
placeName: "Australia (Perth)",
LatLng: [{
lat: -31.951994,
lng: 475.858081
}]
}
];


window.onload = function () {
initMap();
};


function addMarkerInfo() {
for (var i = 0; i < markersOnMap.length; i++) {
var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
'</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';


const marker = new google.maps.Marker({
position: markersOnMap[i].LatLng[0],
map: map
});


const infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});


marker.addListener('click', function () {
closeOtherInfo();
infowindow.open(marker.get('map'), marker);
InforObj[0] = infowindow;
});
// marker.addListener('mouseover', function () {
//     closeOtherInfo();
//     infowindow.open(marker.get('map'), marker);
//     InforObj[0] = infowindow;
// });
// marker.addListener('mouseout', function () {
//     closeOtherInfo();
//     infowindow.close();
//     InforObj[0] = infowindow;
// });
}
}


function closeOtherInfo() {
if (InforObj.length > 0) {
/* detach the info-window from the marker ... undocumented in the API docs */
InforObj[0].set("marker", null);
/* and close it */
InforObj[0].close();
/* blank the array */
InforObj.length = 0;
}
}


function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: centerCords
});
addMarkerInfo();
}
</script>
</head>


<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>


</body>


</html>

小开

下面是多个Reactjs中的标记的示例。

下面是map组件

import React from 'react';
import PropTypes from 'prop-types';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';


const MapContainer = (props) => {
const [mapConfigurations, setMapConfigurations] = useState({
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {}
});


var points = [
{ lat: 42.02, lng: -77.01 },
{ lat: 42.03, lng: -77.02 },
{ lat: 41.03, lng: -77.04 },
{ lat: 42.05, lng: -77.02 }
]
const onMarkerClick = (newProps, marker) => {};


if (!props.google) {
return <div>Loading...</div>;
}


return (
<div className="custom-map-container">
<Map
style=\{\{
minWidth: '200px',
minHeight: '140px',
width: '100%',
height: '100%',
position: 'relative'
}}
initialCenter=\{\{
lat: 42.39,
lng: -72.52
}}
google={props.google}
zoom={16}
>
{points.map(coordinates => (
<Marker
position=\{\{ lat: coordinates.lat, lng: coordinates.lng }}
onClick={onMarkerClick}
icon=\{\{
url: 'https://res.cloudinary.com/mybukka/image/upload/c_scale,r_50,w_30,h_30/v1580550858/yaiwq492u1lwuy2lb9ua.png',
anchor: new google.maps.Point(32, 32), // eslint-disable-line
scaledSize: new google.maps.Size(30, 30)  // eslint-disable-line
}}
name={name}
/>))}
<InfoWindow
marker={mapConfigurations.activeMarker}
visible={mapConfigurations.showingInfoWindow}
>
<div>
<h1>{mapConfigurations.selectedPlace.name}</h1>
</div>
</InfoWindow>
</Map>
</div>
);
};


export default GoogleApiWrapper({
apiKey: process.env.GOOGLE_API_KEY,
v: '3'
})(MapContainer);


MapContainer.propTypes = {
google: PropTypes.shape({}).isRequired,
};

小开

最近最简单的修改后在当前地图标记和聚类算法：

修改：https://developers.google.com/maps/documentation/javascript/marker-clustering

<!DOCTYPE Html>
<html>
<head>
<meta Content-Security-Policy="default-src  'self'; script-src 'self' 'unsafe-eval' https://*/;">
<link type="text/css" href="http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png">
<link rel="icon" href="data:,">
<title>App</title>
</head>
<style type="text/css">
#map {
height: 500
}
</style>


<body>
<div id='map' style="width:100%; height:400px"></div>
<script type='text/javascript'>
function initMap() {
maps = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(12.9824855, 77.637094),
zoom: 5,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var labels='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';
marker = locations.map(function (location, i) {
return new google.maps.Marker({
position: new google.maps.LatLng(location.lat, location.lng),
map: maps,
title: "Map",
label: labels[i % labels.length],
icon: markerImage
});
});


var markerCluster = new MarkerClusterer(maps, marker, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [
{ lat: 12.9824855, lng: 77.637094},
{ lat: 11.9824855, lng: 77.154312 },
{ lat: 12.8824855, lng: 77.637094},
{ lat: 10.8824855, lng: 77.054312 },
{ lat: 12.9824855, lng: 77.637094},
{ lat: 11.9824855, lng: 77.154312 },
{ lat: 12.8824855, lng: 77.637094},
{ lat: 13.8824855, lng: 77.054312 },
{ lat: 14.9824855, lng: 54.637094},
{ lat: 15.9824855, lng: 54.154312 },
{ lat: 16.8824855, lng: 53.637094},
{ lat: 17.8824855, lng: 52.054312 },
{ lat: 18.9824855, lng: 51.637094},
{ lat: 19.9824855, lng: 69.154312 },
{ lat: 20.8824855, lng: 68.637094},
{ lat: 21.8824855, lng: 67.054312 },
{ lat: 12.9824855, lng: 76.637094},
{ lat: 11.9824855, lng: 75.154312 },
{ lat: 12.8824855, lng: 74.637094},
{ lat: 10.8824855, lng: 74.054312 },
{ lat: 12.9824855, lng: 73.637094},
{ lat: 3.9824855, lng: 72.154312 },
{ lat: 2.8824855, lng: 71.637094},
{ lat: 1.8824855, lng: 70.054312 }
];


</script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js">
</script>
<script src="https:maps.googleapis.com/maps/api/js?key=AIzaSyDWu6_Io9xA1oerfOxE77YAv31etN4u3Dw&callback=initMap">
</script>
<script type='text/javascript'></script>

小开

我知道这个答案很晚了。但我希望这也能帮助其他开发人员。：-）
以下代码将在带有信息窗口的谷歌地图上添加多个标记。
此代码可用于在地图上绘制任意数量的标记。
请将您的Google Map API密钥放在此代码的正确位置。（我已将其标记为“您的API密钥”）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Google Map</title>
<style>
#map{
height: 600px;
width: 100%;
}
</style>
</head>
<body>


<h1>My Google Map`</h1>
<div id="map"></div>




<script>
function initMap(){
//Map options
var options = {
zoom:9,
center:{lat:42.3601, lng:-71.0589}
}
// new map
var map = new google.maps.Map(document.getElementById('map'), options);
// customer marker
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
//array of Marrkeers
var markers = [
{
coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
},
{
coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
}
];


//loopthrough markers
for(var i = 0; i <markers.length; i++){
//add markeers
addMarker(markers[i]);
}


//function for the plotting markers on the map
function addMarker (props){
var marker = new google.maps.Marker({
position: props.coords,
map:map,
icon:props.img
});
var infoWindow = new google.maps.InfoWindow({
content:props.con,
});
marker.addListener("click", () => {
infoWindow.open(map, marker);
});
}
}
</script>


<script
src="https://maps.googleapis.com/maps/api/js?key=**YourAPIKey**&callback=initMap"
defer
></script>


</body>
</html>

Google Maps JS API v3-简单的多标记示例

接受答案，用ES6重写：