Google Maps JS API v3 - 简单的多标记示例
[英]Google Maps JS API v3 - Simple Multiple Marker Example
问题描述
Fairly new to the Google Maps Api. 
Google Maps Api 相当新。 I've got an array of data that I want to cycle through and plot on a map.我有一组数据，我想循环遍历并在地图上绘制。 Seems fairly simple, but all the multi-marker tutorials I have found are quite complex.看起来相当简单，但我发现的所有多标记教程都相当复杂。
Let's use the data array from google's site for an example:让我们以谷歌网站上的数据数组为例：
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]
];
I simply want to plot all of these points and have an infoWindow pop up when clicked to display the name.我只想绘制所有这些点，并在单击以显示名称时弹出一个信息窗口。
15 个解决方案
解决方案1
1188 已采纳 2010-06-17 05:36:38
This is the simplest I could reduce it to:这是我可以将其简化为的最简单的方法：
<!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?sensor=false"
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>
👨💻 Edit/fork on a Codepen →
SCREENSHOT截屏
There is some closure magic happening when passing the callback argument to the addListener method.将回调参数传递给addListener方法时，会发生一些闭包魔法。 This can be quite a tricky topic if you are not familiar with how closures work.如果您不熟悉闭包的工作原理，这可能是一个非常棘手的话题。 I would suggest checking out the following Mozilla article for a brief introduction if it is the case:如果是这种情况，我建议查看以下 Mozilla 文章以获取简要介绍：
❯ Mozilla Dev Center: Working with Closures ❯ Mozilla 开发中心：使用闭包
解决方案2
63 2013-03-08 18:30:57
Here is another example of multiple markers loading with a unique title and infoWindow text.这是加载具有唯一title和信息infoWindow文本的多个标记的另一个示例。 Tested with the latest google maps API V3.11.使用最新的谷歌地图 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>
Screenshot of 250 Markers: 250 个标记的屏幕截图：
It will automatically randomize the Lat/Lng to make it unique.它会自动随机化 Lat/Lng 以使其独一无二。 This example will be very helpful if you want to test 500, 1000, xxx markers and performance.如果您想测试 500、1000、xxx 标记和性能，此示例将非常有用。
解决方案3
41 2014-01-29 12:02:32
I thought I would put this here as it appears to be a popular landing point for those starting to use Google Maps API's.我想我会把它放在这里，因为对于那些开始使用 Google Maps API 的人来说，它似乎是一个受欢迎的着陆点。 Multiple markers rendered on the client side is probably the downfall of many mapping applications performance wise.在客户端呈现的多个标记可能是许多地图应用程序性能的下降。 It is difficult to benchmark, fix and in some cases even establish there is an issue (due to browser implementation differences, hardware available to the client, mobile devices, the list goes on).很难进行基准测试、修复，在某些情况下甚至确定存在问题（由于浏览器实现差异、客户端可用的硬件、移动设备，列表还在继续）。
The simplest way to begin to address this issue is to use a marker clustering solution.开始解决此问题的最简单方法是使用标记聚类解决方案。 The basic idea is to group geographically similar locations into a group with the number of points displayed.基本思想是将地理上相似的位置分组到一个显示点数的组中。 As the user zooms into the map these groups expand to reveal individual markers beneath.当用户放大地图时，这些组会展开以显示下方的各个标记。
Perhaps the simplest to implement is the markerclusterer library.也许最简单的实现是markerclusterer库。 A basic implementation would be as follows (after library imports):基本实现如下（在库导入之后）：
<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>
The markers instead of being added directly to the map are added to an array.标记不是直接添加到地图中，而是添加到数组中。 This array is then passed to the library which handles complex calculation for you and attached to the map.然后将此数组传递给为您处理复杂计算的库并附加到地图。
Not only do these implementations massively increase client side performance but they also in many cases lead to a simpler and less cluttered UI and easier digestion of data on larger scales.这些实现不仅极大地提高了客户端性能，而且在许多情况下还导致更简单、更整洁的 UI，更容易消化更大规模的数据。
Other implementations are available from Google. 其他实现可从 Google 获得。
Hope this aids some of those newer to the nuances of mapping.希望这有助于一些较新的人了解映射的细微差别。
解决方案4
22 2014-06-06 12:58:16
Asynchronous version :异步版本：
<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>
解决方案5
15 2013-10-17 07:14:24
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();
});
}
Full working example.完整的工作示例。 You can just copy, paste and use.您只需复制、粘贴和使用即可。
解决方案6
12
From Google Map API samples :来自Google Map 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 <area> 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]
});
}
}
解决方案7
11 2015-02-25 19:06:30
Here is another version I wrote to save map real estate, that places the infowindow pointer on the actual lat and long of the marker, while temporarily hiding the marker while the infowindow is being displayed.这是我为保存地图空间而编写的另一个版本，它将信息窗口指针放在标记的实际纬度和经度上，同时在显示信息窗口时暂时隐藏标记。
It also does away with the standard 'marker' assignment and speeds up processing by directly assigning the new marker to the markers array on the markers creation.它还取消了标准的“标记”分配，并通过在创建标记时直接将新标记分配给标记数组来加快处理速度。 Note however, that additional properties have been added to both the marker and the infowindow, so this approach is a tad unconventional... but that's me!但是请注意，附加属性已添加到标记和信息窗口中，因此这种方法有点非常规......但这就是我！
It is never mentioned in these infowindow questions, that the standard infowindow IS NOT placed at the lat and lng of the marker point, but rather at the top of the marker image.这些信息窗口问题中从未提到标准信息窗口不是放置在标记点的纬度和经度处，而是位于标记图像的顶部。 The marker visibility must be hidden for this to work, otherwise the Maps API will shove the infowindow anchor back to the top of the marker image again.必须隐藏标记可见性才能使其工作，否则 Maps API 会将信息窗口锚点再次推回到标记图像的顶部。
Reference to the markers in the 'markers' array are created immediately upon marker declaration for any additional processing tasks that may be desired later(hiding/showing, grabbing the coords,etc...).在标记声明后立即创建对“标记”数组中标记的引用，用于稍后可能需要的任何其他处理任务（隐藏/显示、抓取坐标等...）。 This saves the additional step of assigning the marker object to 'marker', and then pushing the 'marker' to the markers array... a lot of unnecessary processing in my book.这节省了将标记对象分配给“标记”，然后将“标记”推送到标记数组的额外步骤……在我的书中有很多不必要的处理。
Anyway, a different take on infowindows, and hope it helps to inform and inspire you.无论如何，对信息窗口的不同看法，希望它有助于通知和启发您。
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);
Here is a working JSFiddle这是一个有效的 JSFiddle
Additional Note附加说明
You will notice in this given Google example data a fourth place in the 'locations' array with a number.您会注意到在这个给定的 Google 示例数据中，'locations' 数组中的第四个位置带有一个数字。 Given this in the example, you could also use this value for the marker id in place of the current loop value, such that...在示例中考虑到这一点，您还可以使用此值作为标记 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],
});
};
解决方案8
10 2016-11-26 01:34:49
Accepted answer, rewritten in ES6:接受的答案，用 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);
})
})
解决方案9
6 2017-04-12 05:54:33
Add a marker in your program is very easy.在您的程序中添加标记非常容易。 You just may add this code:您只需添加以下代码：
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
The following fields are particularly important and commonly set when you construct a marker:在构建标记时，以下字段特别重要且通常设置：
-
position(required) specifies a LatLng identifying the initial location of the marker.position（必需）指定标识标记初始位置的 LatLng。 One way of retrieving a LatLng is by using the Geocoding service .检索 LatLng 的一种方法是使用地理编码服务。 -
map(optional) specifies the Map on which to place the marker.map（可选）指定放置标记的地图。 If you do not specify a map on construction of the marker, the marker is created but is not attached to (or displayed on) the map.如果在构建标记时未指定地图，则会创建标记，但不会附加到（或显示在）地图上。 You may add the marker later by calling the marker's setMap()method.您可以稍后通过调用标记的setMap()方法添加标记。
Note , in the example, the title field set the marker's title who will appear as a tooltip.请注意，在示例中，标题字段设置了将显示为工具提示的标记的标题。
You may consult the Google api documenation here .您可以在此处查阅 Google api 文档。
This is a complete example to set one marker in a map.这是在地图中设置一个标记的完整示例。 Be care full, you have to replace YOUR_API_KEY by your google API key :小心点，你必须用你的谷歌 API 密钥替换YOUR_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>
Now, if you want to plot markers of an array in a map, you should do like this:现在，如果您想在地图中绘制数组的标记，您应该这样做：
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]
});
}
}
This example give me the following result:这个例子给了我以下结果：
You can, also, add an infoWindow in your pin.您还可以在 pin 中添加 infoWindow。 You just need this code:你只需要这个代码：
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!'
});
You can have the Google's documentation about infoWindows here .您可以在此处获得有关 infoWindows 的 Google 文档。
Now, we can open the infoWindow when the marker is "clik" like this:现在，我们可以在标记为“点击”时打开信息窗口，如下所示：
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.
});
Note , you can have some documentation about Listener here in google developer.注意，你可以对一些文件Listener 这里在谷歌开发者。
And, finally, we can plot an infoWindow in a marker if the user click on it.最后，如果用户单击它，我们可以在标记中绘制一个 infoWindow。 This is my complete code:这是我的完整代码：
<!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>
Normally, you should have this result:通常，您应该得到以下结果：
解决方案10
6 2019-02-19 09:19:40
Complete HTML code完整的 HTML 代码
- Show InfoWindow on Click or Hover.单击或悬停时显示信息窗口。
- Only one InfoWindow will be shown只会显示一个信息窗口
<!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>
解决方案11
4 2016-06-30 03:00:38
Following from Daniel Vassallo's answer , here is a version that deals with the closure issue in a simpler way.继Daniel Vassallo 的回答之后，这里有一个以更简单的方式处理闭包问题的版本。
Since since all markers will have an individual InfoWindow and since JavaScript doesn't care if you add extra properties to an object, all you need to do is add an InfoWindow to the Marker's properties and then call the .open() on the InfoWindow from itself!由于所有标记都有一个单独的InfoWindow并且 JavaScript 不关心您是否向对象添加额外的属性，因此您需要做的就是将InfoWindow添加到Marker 的属性，然后调用InfoWindow上的.open()从本身！
Edit: With enough data, the pageload could take a lot of time, so rather than construction the InfoWindow with the marker, the construction should happen only when needed.编辑：如果有足够的数据，页面加载可能会花费很多时间，因此与其使用标记构建InfoWindow ，不如仅在需要时进行构建。 Note that any data used to construct the InfoWindow must be appended to the Marker as a property ( data ).请注意，用于构造InfoWindow 的任何数据都必须作为属性 ( data ) 附加到标记。 Also note that after the first click event, infoWindow will persist as a property of it's marker so the browser doesn't need to constantly reconstruct.另请注意，在第一次单击事件之后， 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);
})
}
解决方案12
2 2016-09-04 16:01:00
Here is a nearly complete example javascript function that will allow multiple markers defined in a JSONObject.这是一个几乎完整的示例 javascript 函数，它将允许在 JSONObject 中定义多个标记。
It will only display the markers that are with in the bounds of the map.它只会显示地图边界内的标记。
This is important so you are not doing extra work.这很重要，因此您无需做额外的工作。
You can also set a limit to the markers so you are not showing an extreme amount of markers (if there is a possibility of a thing in your usage);您还可以对标记设置限制，这样您就不会显示过多的标记（如果您的使用中可能存在某物）；
it will also not display markers if the center of the map has not changed more than 500 meters.如果地图中心的变化不超过 500 米，它也不会显示标记。
This is important because if a user clicks on the marker and accidentally drags the map while doing so you don't want the map to reload the markers.这很重要，因为如果用户单击标记并在这样做时不小心拖动了地图，您不希望地图重新加载标记。
I attached this function to the idle event listener for the map so markers will show only when the map is idle and will redisplay the markers after a different event.我将此函数附加到地图的空闲事件侦听器，以便标记仅在地图空闲时显示，并在不同事件后重新显示标记。
In action screen shot there is a little change in the screen shot showing more content in the infowindow.在操作屏幕截图中，屏幕截图略有变化，在信息窗口中显示了更多内容。 pasted from pastbin.com
粘贴自 pastbin.com
<script src="//pastebin.com/embed_js/uWAbRxfg"></script>
解决方案13
2 2020-12-19 20:04:57
- I know this answer is very much late.我知道这个答案已经很晚了。 But I wish this will help other developers also.但我希望这也能帮助其他开发人员。 :-) :-)
- The Following code will add multiple markers on the google map with the information window.以下代码将在带有信息窗口的 google 地图上添加多个标记。
- And this code can be used to plot any number of markers on the map.并且此代码可用于在地图上绘制任意数量的标记。
- Please put your Google Map API key to the correct position of this code.请将您的 Google Map API 密钥放在此代码的正确位置。 (I have marked that as "Your API Key") （我已将其标记为“您的 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>
解决方案14
0 2020-02-03 02:42:30
Here is an example of multiple markers in Reactjs .这是Reactjs中多个标记的示例。
Below is the map component下面是地图组件
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,
};
解决方案15
0 2020-07-17 18:38:23
The recent simplest after modification in current map markers and clusterer algorithm:修改当前地图标记和聚类算法后最近最简单的：
Modification on: https://developers.google.com/maps/documentation/javascript/marker-clustering[![enter image description here] 1 ] 1修改： https : //developers.google.com/maps/documentation/javascript/marker-clustering[![在此处输入图片描述] 1 ] 1
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.