Несколько Infowindows для одного маркера Google Maps

Question

Есть ли способ создать несколько инфо-окон для одного маркера Google Maps?

Например, если в течение года несколько экземпляров отправляются по одному и тому же адресу, могут ли свойства для каждого из этих поставок отображаться в прокручиваемом инфополе от этого маркера?

В противном случае я в конечном итоге сделаю действительно грязный AJAX.

В теории я хотел бы просто создать массив contentStrings, как показано в модифицированном примере от Google. В идеале это будет отображаться как судоходная карусель внутри инфоиндуста.

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); 
    }); 
} 

Answer 1

Простое доказательство концепции для одного маркера, перебирать массив строк, когда кнопка «рядом» нажата:

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>