Я проверил ответы здесь и во многих других местах, и ничего не сработало. Может быть, потому что API сейчас v3 или кто знает.
Я собираюсь опубликовать ответ, который работал для меня, который довольно сильно отличается от других, которые я нашел, и я думаю, что может быть использован для многих других случаев. Возможно, это немного уродливо, но в конце концов это инъекция скрипта, и никто не любит инъекции.
Я не копирую все это в jsbin / codepen / etc., потому что они просто не могут копировать среду GS (Greasemonkey) (по крайней мере, пока) и внутреннюю работу.
API ЗАГРУЗКИ
Я контролировал целевую веб-страницу, так что она была там вместо того, чтобы добавляться через GS.
<script src="https://maps.googleapis.com/maps/api/js?key=my-personal-key"></script>
По моему опыту, если вы не добавите ключ, после нескольких запросов он потерпит неудачу, и вам придется подождать некоторое время, пока он снова не заработает.
У меня также есть div с плавающим окном, в котором я буду создавать свою карту.
<div style="overflow:hidden; height:500px; width:700px; position:fixed; top:20px; right:20px; border:3px solid #73AD21;">
<div id="gmap_canvas" style="height:500px;width:700px;"></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
<div id="Content_Title"></div>
</div>
GS SCRIPT
// Pass whatever data you need to the window
unsafeWindow.mapdata=JSON.stringify(mapdata);
// Define content of script
var script2 = document.createElement('script');
script2.textContent = `
// Get data
mapdata=JSON.parse(window.mapdata);
// Create map and use data
function initializeX2() {
// some stuff ...
// Create map
var mapCanvas = document.getElementById('gmap_canvas');
var myLatLng = {lat: parseFloat(mapdata[max].latitude), lng: parseFloat(mapdata[max].longitude)};
var mapOptions = {
center: myLatLng,
zoom: 15,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker=[];
var contentInfoWindow=[];
var infowindow=[];
// Create markers
for (var i = max ; i > max-iterations ; i--) {
// Create marker
var BLatLng={lat: parseFloat(mapdata[i].latitude), lng: parseFloat(mapdata[i].longitude)};
console.log(BLatLng);
marker[i] = new google.maps.Marker({
position: BLatLng,
map: map
});
// Create infowindow
contentInfoWindow[i]=mapdata[i].number + " - " + mapdata[i].name;
infowindow[i] = new google.maps.InfoWindow({content: contentInfoWindow[i] });
// The function has this strange form to take values of references instead of references (pointers)
google.maps.event.addListener(marker[i], 'click', function(innerKey) {
return function() {
infowindow[innerKey].open(map, marker[innerKey]);
}
}(i));
// Open markers
infowindow[i].open(map, marker[i]);
}; // end of for
}; // end of initializeX2
initializeX2();
`; // End of string to be added to page
// Add script to the page
var head = document.head || document.documentElement;
head.appendChild(script2);
// Clean-up:
script2.parentNode.removeChild(script2);
Некоторые пояснения
В моем случае маркеры открываются при создании, и несколько могут остаться открытыми. Это мое желаемое поведение. Если вы хотите что-то еще, вы должны искать вокруг.
Это может вам помочь.
Создайте только одно окно, чтобы одновременно было открыто только одно информационное окно (http://www.aspsnippets.com/Articles/Google-Maps-API-V3-Open-Show-only-one-InfoWindow-at-a-time-and-close-other-InfoWindow.aspx)
Если у кого-то есть другие решения, работающие с API v3 (через google = unsafeWindow.google), мне было бы очень интересно узнать.