同一JavaScript文件中两个Googlemaps框，位置不同

Question

我正在尝试在我的代码中找到我的错误：

我想将映射添加到相同的脚本文件，并且能够使用条件语句来做到这一点，但是当我到达位置和标记的一部分时，我无法显示我的图钉，信息窗口和图标。

这是我的代码：

var map, locs;
function initMap() {
	if (document.getElementById('map')) {
		map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: 01, lng: -01},
			zoom: 15
		});

		var image = 'http:myimage.png';

		var locations = [

		['<div class="OzwZjf-jRmmHf-MZArnb-KDwhZb fO2voc-jRmmHf-LJTIlf"><p>My Location</p>' 49.27597, -123.1185, 1]];

		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,
				icon: image
			});

			google.maps.event.addListener(marker, 'click', (function(marker, i) {
				return function() {
					infowindow.setContent(locations[i][0]);
					infowindow.open(map, marker);
				}
			})(marker, i));
		}
	} else if (document.getElementById('locs')) {

		locs = new google.maps.Map(document.getElementById('locs'), {
			center: {lat:02, lng: -02},
			zoom: 4
		});

		var image = 'http:myimage.png';

		var locations_two = [

		['<div class="OzwZjf-jRmmHf-MZArnb-KDwhZb fO2voc-jRmmHf-LJTIlf"><p>My Location</p>' 02, -02, 1]];

		var infowindow = new google.maps.InfoWindow();

		var marker_two, i;

		for (i = 0; i < locations_two.length; i++) {  
			marker_two = new google.maps.Marker({
				position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
				map: map,
				icon: image
			});

			google.maps.event.addListener(marker_two, 'click', (function(marker, i) {
				return function() {
					infowindow.setContent(locations_two[i][0]);
					infowindow.open(map, marker);
				}
			})(marker_two, i));
		}
	}
}
google.maps.event.addDomListener(window, "load", initMap);

#map {height: 500px;}
#locs {height: 500px;}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"><div>
<div id="locs"><div>

两个地图都在不同的页面中，我只能看到第一个带有位置的地图，第二个没有位置，标记和信息窗口。

Answer 1

更改

marker_two = new google.maps.Marker({
            position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
            map: map,
            icon: image
        });

到

marker_two = new google.maps.Marker({
            position: new google.maps.LatLng(locations_two[i][1], locations_two[i][2]),
            map: locs,
            icon: image
        });

您需要使用locs，因为这是您创建的第二个地图对象，并且是创建标记而不是map时需要传递的内容。

也01、02也不是有效的浮点值。您需要将它们更改为1、2，这将使它们成为有效的浮点数。