[英]Multiple Infowindows for a Single Google Maps Marker
Is there a way to create multiple infowindows for a single google maps marker? 有没有一种方法可以为单个Google地图标记创建多个信息窗口?
For example, if several deliveries are made to the same address throughout the year, can the properties for each of those deliveries be displayed in a scrollable infowindow from that marker? 例如,如果一年中有几次交付到同一地址,是否可以从该标记在可滚动的信息窗口中显示每个交付的属性?
Otherwise I would end up doing some really dirty AJAX. 否则,我最终会做一些非常脏的AJAX。
In theory I would love to just create an array of contentStrings as shown in the modified example from Google . 从理论上讲,我只想创建一个contentString数组,如Google的修改示例所示。 Ideally this would be displayed as a navigable carousel within the infowindow. 理想情况下,它将在信息窗口中显示为可导航的轮播。
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
**var contentString = ['contentString1','contentString2','contentString3'];**
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
Simple proof of concept for a single marker, iterate through the array of strings when a "next" button is clicked: 单个标记的简单概念证明,单击“下一个”按钮时,将遍历字符串数组:
function initMap() { var uluru = { lat: -25.363, lng: 131.044 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); infowindow = new google.maps.InfoWindow({ content: contentString[0] + "<br><input type='button' onclick='next(1);' value='next' />" }); var marker = new google.maps.Marker({ position: uluru, map: map, title: 'Uluru (Ayers Rock)' }); marker.addListener('click', function() { infowindow.open(map, marker); }); map.addListener('click', function() { infowindow.close(); }); } var contentString = ['contentString1', 'contentString2', 'contentString3']; var infowindow; function next(i) { var next = i + 1; if (next >= contentString.length) { next = 0; } infowindow.setContent(contentString[i] + "<br><input type='button' onclick='next(" + next + ");' value='next' />") } google.maps.event.addDomListener(window, "load", initMap);
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.