带有多个信息窗口的Google地图

Posted 2021-02-25

<div id="gloveMap" style="height:400px;width:320px;display:block;">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
	function mapIt(){
 
		var latlng = new google.maps.LatLng(36.728058, -108.218686);
    	var myOptions = {
    		zoom: 11,
      		center: latlng,
      		mapTypeId: google.maps.MapTypeId.ROADMAP,
		}
		var map = new google.maps.Map(document.getElementById('gloveMap'), myOptions);
		setMarkers(map, places);
	}
 
	var places = [
			['Station 1', 36.732281, -108.211212],
			['Station 2',36.764225,-108.148329],
			['Station 3',36.738504,-108.229113],
			['Station 4',36.723368,-108.168837],
			['Station 5',36.75534,-108.197532],
			['Station 6',36.734918,-108.249559],
			['The Daily Times',36.730449,-108.206899],
	];
 
	var popUps = [
		'<strong>Farmington Fire Station 1</strong><br />301 N. Auburn',
		'<strong>Farmington Fire Station 2</strong><br />3800 English Road',
		'<strong>Farmington Fire Station 3</strong><br />1401 W. Navajo',
		'<strong>Farmington Fire Station 4</strong><br />790 S. Hutton',		
		'<strong>Farmington Fire Station 5</strong><br />609 E. 30th',		
		'<strong>Farmington Fire Station 6</strong><br />3101 W. Main',
		'<strong>The Daily Times</strong><br />301 N. Allen'
		]
 
 
	var infowindow;
	function setMarkers(map, locations) {
 
		 for (var i = 0; i < places.length; i++) {
			var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,	
				title: locations[i][0],
			});
			(function(i, marker) {
				google.maps.event.addListener(marker,'click',function() {
					if (!infowindow) {
						infowindow = new google.maps.InfoWindow();
					}
					infowindow.setContent(popUps[i]);
				infowindow.open(map, marker);
				});
			})(i, marker);
		 }
	};
	mapIt();