谷歌地图自动打开infoWindow

时间：2017-04-29 11:41:17

标签： javascript google-maps google-maps-api-3

我在谷歌地图上的信息窗口自动打开时遇到问题我已经按照这里的教程...

https://www.taniarascia.com/google-maps-apis-for-multiple-locations/

一切正常但我要求我的地图上的3个信息窗口在页面加载时打开，以便访问者看到它们而无需点击标记。

我尝试了几种我在这里找到的解决方案..

Google maps-api v3 InfoWindow automatically open on page load

但不能让他们中的任何一个工作。 

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>

1 个答案:

答案 0 :(得分：0)

相关问题（已结束）：Show all infowindows open

如果您希望一次打开多个InfoWindow，则需要为每个标记创建一个（假设您希望它们在所有标记处打开，如果您只想要三个，那么只创造三个。）

enter image description here

使用createMarker函数获取标记/ 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>

相关问题
最新问题