谷歌地图自动打开infoWindow [英] google maps auto open infoWindow
问题描述
我有一个问题，在我的谷歌地图上获取信息窗口来自动打开我在这里跟着一个教程...
c $ c>函数在marker / infowindow上关闭： I'm having a problem getting info windows on my google map to auto open I have followed a tutorial here... https://www.taniarascia.com/google-maps-apis-for-multiple-locations/ Everything is working but I require that the 3 info windows on my map open on page load so visitors see them without having to click the markers. I have tried several solutions I found here.. Google maps-api v3 InfoWindow automatically open on page load but cant get any of them to work.
Related question (closed): Show all infowindows open If you want to have more than one InfoWindow open at a time you need to create one for each marker (assuming you want them open on all the markers, if you only ever want three, then only create three). code snippet using a
这篇关于谷歌地图自动打开infoWindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
html，body，＃map {height：100％;宽度：100％;} < div id =地图>< / DIV><脚本> var map;函数initMap（）{var scorrier = {info：'< center>< img src =assets / images / ge-logo-300px.jpg>< br>< br> \< strong>大产业及LT; /强><峰; br> \ Scorrier房屋及LT峰; br>康沃尔，TR16 5AU<峰; br> \<强>< A HREF =https://www.google.co.uk/maps /dir/Bristol/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.8495256,-5.0243318,8z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x4871836681b3d861:0x8ee4b22e4b9ad71f!2m2!1d- 2.58791！2d51.454513！1m5！1m1！1s0x486b18b9cddd326b：0x25c89b140e8bf264！2m2！1d-5.1924054！2d50.2501818target =_ blankstyle =color：red>指向The Great Estate< / a>< center>< / strong>'，lat：50.2501818，long：-5.1924054}; var redruth = {info：'< strong> Redruth Train Station< / strong>< br> \ Redruth< br>康沃尔，TR15 2AB< br> \< strong>< a href =https：/ /www.google.co.uk/maps/dir/TR15+2AB,+Station+Rd,+Redruth/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.2428949,-5.2183829,15z/data=！ ！！！！！！3M1 4B1 4m13 4M12 1M5 1M1 1s0x486b1f5fb5f4a7ed：0xfa94523df7169fe62平方米1D-5.2258756 2d50.2332886 1M5 1M1 1s0x486b18b9cddd326b：！！！！！！！！？0x25c89b140e8bf2642平方米1D-5.1924054 2d50.2501818 SHORTURL = 1\" 的目标= _blankstyle =color：red>指向The Great Estate< / a>< / strong>'，lat：50.233210，long：-5.225936}; var truro = {info：'< strong> Truro火车站< / strong>< br> \\\ Station Road，Truro< br>康沃尔，TR1 3HH< br> \\< strong>< a href =https://www.google.co.uk/maps/dir/Truro,+Station+Road,+Truro,+Cornwall+TR1+ 3HH / Scorrier +房屋+ Scorrier，+雷德拉斯+ TR16 + 5AU / @ 50.2646882，-5.1661898,13z /数据= 3M1 4B1 4m13 4M12 1M5 1M1 1s0x486b17b40079af5d：！！！！！！！！！！0x9752f63a0a1484f82平方米1D-5.0641465 2d50 .2640872！1m5！1m1！1s0x486b18b9cddd326b：0x25c89b140e8bf264！2m2！1d-5.1924054！2d50.2501818？shorturl = 1target =_ blankstyle =color：red>指向The Great Estate< / a>< / strong>'，lat：50.264087，long：-5.064146}; var locations = [[scorrier.info，scorrier.lat，scorrier.long，0]，[redruth.info，redruth.lat，redruth.long，1]，[truro.info，truro.lat，truro.long，2 ]，];地图=新google.maps.Map（的document.getElementById（ '地图'），{变焦：13，滚轮：假，gestureHandling： '合作'，中心：新google.maps.LatLng（50.2501818，-5.1924054）的mapTypeId： google.maps.MapTypeId.ROADMAP}）; var marker，i; for（i = 0; i< locations.length; i ++）{createMarker（locations [i]）; }} function createMarker（location）{var infowindow = new google.maps.InfoWindow（{disableAutoPan：true}）; var marker = new google.maps.Marker（{position：new google.maps.LatLng（location [1]，location [2]），map：map}）; google.maps.event.addListener（marker，'click'，function（evt）{infowindow.setContent（location [0]）; infowindow.open（map，marker）;}）; google.maps.event.trigger（标记，'点击'）; }< / script>< script async defer src =https://maps.googleapis.com/maps/api/js?callback=initMap>< / script> function initMap() {
var scorrier = {
info: '<center><img src="assets/images/ge-logo-300px.jpg"><br><br>\
<strong>The Great Estate</strong><br>\
Scorrier House<br>Cornwall, TR16 5AU<br>\
<strong><a href="https://www.google.co.uk/maps/dir/Bristol/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.8495256,-5.0243318,8z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x4871836681b3d861:0x8ee4b22e4b9ad71f!2m2!1d-2.58791!2d51.454513!1m5!1m1!1s0x486b18b9cddd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818" target="_blank" style="color:red">Directions to The Great Estate</a></center></strong>',
lat: 50.2501818,
long: -5.1924054
};
var redruth = {
info: '<strong>Redruth Train Station</strong><br>\
Redruth<br>Cornwall, TR15 2AB<br>\
<strong><a href="https://www.google.co.uk/maps/dir/TR15+2AB,+Station+Rd,+Redruth/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.2428949,-5.2183829,15z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x486b1f5fb5f4a7ed:0xfa94523df7169fe6!2m2!1d-5.2258756!2d50.2332886!1m5!1m1!1s0x486b18b9cddd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818?shorturl=1" target="_blank" style="color:red">Directions to The Great Estate</a></strong>',
lat: 50.233210,
long: -5.225936
};
var truro = {
info: '<strong>Truro Train Station</strong><br>\r\
Station Road, Truro<br> Cornwall, TR1 3HH<br>\
<strong><a href="https://www.google.co.uk/maps/dir/Truro,+Station+Road,+Truro,+Cornwall+TR1+3HH/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.2646882,-5.1661898,13z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x486b17b40079af5d:0x9752f63a0a1484f8!2m2!1d-5.0641465!2d50.2640872!1m5!1m1!1s0x486b18b9cddd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818?shorturl=1" target="_blank" style="color:red">Directions to The Great Estate</a></strong>',
lat: 50.264087,
long: -5.064146
};
var locations = [
[scorrier.info, scorrier.lat, scorrier.long, 0],
[redruth.info, redruth.lat, redruth.long, 1],
[truro.info, truro.lat, truro.long, 2],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
scrollwheel: false,
gestureHandling: 'cooperative',
center: new google.maps.LatLng(50.2501818, -5.1924054),
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
});
/* Not sure how to trigger all info windows to open on page load not click????
google.maps.event.addDomListener(window, 'load', initialize);
*/
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}<div id="map"></div>
<script src="assets/js/map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?MYKEYISHERE&callback=initMap"></script>createMarker function to get closure on the marker/infowindow:html,
body,
#map {
height: 100%;
width: 100%;
}<div id="map"></div>
<script>
var map;
function initMap() {
var scorrier = {
info: '<center><img src="assets/images/ge-logo-300px.jpg"><br><br>\
<strong>The Great Estate</strong><br>\
Scorrier House<br>Cornwall, TR16 5AU<br>\
<strong><a href="https://www.google.co.uk/maps/dir/Bristol/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.8495256,-5.0243318,8z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x4871836681b3d861:0x8ee4b22e4b9ad71f!2m2!1d-2.58791!2d51.454513!1m5!1m1!1s0x486b18b9cddd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818" target="_blank" style="color:red">Directions to The Great Estate</a></center></strong>',
lat: 50.2501818,
long: -5.1924054
};
var redruth = {
info: '<strong>Redruth Train Station</strong><br>\
Redruth<br>Cornwall, TR15 2AB<br>\
<strong><a href="https://www.google.co.uk/maps/dir/TR15+2AB,+Station+Rd,+Redruth/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.2428949,-5.2183829,15z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x486b1f5fb5f4a7ed:0xfa94523df7169fe6!2m2!1d-5.2258756!2d50.2332886!1m5!1m1!1s0x486b18b9cddd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818?shorturl=1" target="_blank" style="color:red">Directions to The Great Estate</a></strong>',
lat: 50.233210,
long: -5.225936
};
var truro = {
info: '<strong>Truro Train Station</strong><br>\r\
Station Road, Truro<br> Cornwall, TR1 3HH<br>\
<strong><a href="https://www.google.co.uk/maps/dir/Truro,+Station+Road,+Truro,+Cornwall+TR1+3HH/Scorrier+House,+Scorrier,+Redruth+TR16+5AU/@50.2646882,-5.1661898,13z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x486b17b40079af5d:0x9752f63a0a1484f8!2m2!1d-5.0641465!2d50.2640872!1m5!1m1!1s0x486b18b9cddd326b:0x25c89b140e8bf264!2m2!1d-5.1924054!2d50.2501818?shorturl=1" target="_blank" style="color:red">Directions to The Great Estate</a></strong>',
lat: 50.264087,
long: -5.064146
};
var locations = [
[scorrier.info, scorrier.lat, scorrier.long, 0],
[redruth.info, redruth.lat, redruth.long, 1],
[truro.info, truro.lat, truro.long, 2],
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
scrollwheel: false,
gestureHandling: 'cooperative',
center: new google.maps.LatLng(50.2501818, -5.1924054),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
for (i = 0; i < locations.length; i++) {
createMarker(locations[i]);
}
}
function createMarker(location) {
var infowindow = new google.maps.InfoWindow({
disableAutoPan: true
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[1], location[2]),
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(location[0]);
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, 'click');
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
