谷歌地图 api v3 中不同 infoWindow 的独特内容答案

【问题标题】：Unique content for different infoWindow in google maps api v3谷歌地图 api v3 中不同 infoWindow 的独特内容
【发布时间】：2011-08-23 19:39:25
【问题描述】：

我第一次使用 Google Maps API，我希望在点击时显示独特的内容（每个标记的 diff iframe youtube vid）。我曾经有过这样的工作，但是当单击另一个信息窗口时，我无法关闭另一个信息窗口。

我正在尝试更改以下演示代码以在单击另一个时打开一个，但无法根据单击的标记来更改内容。

var Demo = {
map: null,
infoWindow: null   
};

 /**
* Called when clicking anywhere on the map and closes the info window.
*/
Demo.closeInfoWindow = function() {
Demo.infoWindow.close();
};

/**
* Opens the shared info window, anchors it to the specified marker, and
* displays the marker's position as its content.
*/
Demo.openInfoWindow = function(marker) {
var markerLatLng = marker.getPosition();
Demo.infoWindow.setContent([
'<b>Marker position is:</b><br/>',
markerLatLng.lat(),
', ',
markerLatLng.lng()
].join(''));
Demo.infoWindow.open(Demo.map, marker);
},

/**
* Called only once on initial page load to initialize the map.
*/
Demo.init = function() {
// Create single instance of a Google Map.
var centerLatLng = new google.maps.LatLng(0, 0);
Demo.map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: centerLatLng,
zoom: 2,
    maxZoom:3,
    minZoom:2,

  disableDefaultUI: true,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

// Create a single instance of the InfoWindow object which will be shared
// by all Map objects to display information to the user.
Demo.infoWindow = new google.maps.InfoWindow();

// Make the info window close when clicking anywhere on the map.
google.maps.event.addListener(Demo.map, 'click', Demo.closeInfoWindow);

// Add multiple markers in a few random locations around San Francisco.
// First random marker - CHINA
var marker1 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(33.4, 103.8),
});

// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker1, 'click', function() {
Demo.openInfoWindow(marker1);
});

// Second random marker - Uruguay
var marker2 = new google.maps.Marker({
map: Demo.map,
position: new google.maps.LatLng(-32.81, -55.88),
});

// Register event listeners to each marker to open a shared info
// window displaying the marker's position when clicked or dragged.
google.maps.event.addListener(marker2, 'click', function() {
Demo.openInfoWindow(marker2);
});


}

我知道我需要为每个标记上包含 iframe 的内容创建一个变量，但我没有足够的 js 来执行此操作，然后将其正确拉入 infoWindow。

我们不胜感激。谢谢！

【问题讨论】：

标签： javascript api google-maps infowindow

【解决方案1】：

每个标记都需要打开一个不同的 InfoWindow 实例，而该实例又具有不同的内容集。

创建标记时，您可以轻松地向标记添加一个额外的属性，该属性引用相应信息窗口的实例。然后，“单击”事件可以使用该引用打开正确的信息窗口。

【讨论】：