Два окна googlemaps в одном и том же файле javascript в разных местах

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, что сделает их действительными числами с плавающей точкой.