JavaScript가있는 Google지도는 8 개의 변수가있을 때 2 개의지도 만 표시합니다.

Question

안녕하세요 다른 페이지를 다른 JavaScript 파일로 모두 표시하려고합니다. 나는 (변수를 변경하는) 모든 맵에서 같은 코드를했지만 처음 2 개만 작동합니다. 자바 스크립트 파일이 첫 번째 페이지에서 ID를 가져온 다음 다른 ID가 다른 페이지를 검색하지 않기 때문에 JavaScript가 null로 인식되지 않는다고 생각합니다. 다른 HTML 페이지에서 ID를 검색하도록하려면 어떻게해야합니까?

미리 감사드립니다. html로 하나의

window.onload = (function() { 

var lidertel = {lat: 43.300829, lng: -3.032376}; 
var ametsa = {lat: 43.306208, lng: -3.049617}; 
var ekin = {lat: 43.235692, lng: -3.008844}; 
var norbisca = {lat: 43.301795, lng: -2.947333}; 
var menesianos = {lat: 42.821056, lng: -2.799419}; 
var goval = {lat: 43.250875, lng: -2.896717}; 
var blueForce = {lat: 43.260901, lng: -2.926113}; 
var azulMarino = {lat: 43.260785, lng: -2.928851}; 


    var map = new google.maps.Map(document.getElementById('map-lidertel'), { 
     zoom: 13, 
     center: lidertel, 
     }); 
    new google.maps.Marker({ 
     position: lidertel, 
     map: map 
    }); 


    var map2 = new google.maps.Map(document.getElementById('map-ametsa'), { 
     zoom: 13, 
     center: ametsa, 
    }); 
    new google.maps.Marker({ 
     position: ametsa, 
     map: map2 
    }); 


    var map3 = new google.maps.Map(document.getElementById('map-ekin'), { 
     zoom: 13, 
     center: ekin 
    }); 
    new google.maps.Marker({ 
     position: ekin, 
     map: map3 
    }); 


    var map4 = new google.maps.Map(document.getElementById('map-norbisca'), { 
     zoom: 13, 
     center: norbisca 
    }); 
    new google.maps.Marker({ 
     position: norbisca, 
     map: map4 
    }); 


    var map5 = new google.maps.Map(document.getElementById('map-menesianos'), { 
     zoom: 13, 
     center: menesianos 
    }); 
    new google.maps.Marker({ 
     position: menesianos, 
     map: map5 
    }); 


    var map6 = new google.maps.Map(document.getElementById('map-goval'), { 
     zoom: 13, 
     center: goval 
    }); 
    new google.maps.Marker({ 
     position: goval, 
     map: map6 
    }); 


    var map7 = new google.maps.Map(document.getElementById('map-blueForce'), { 
     zoom: 13, 
     center: blueForce 
    }); 
    new google.maps.Marker({ 
     position: blueForce, 
     map: map7 
    }); 


    var map8 = new google.maps.Map(document.getElementById('map-azulMarino'), { 
     zoom: 13, 
     center: azulMarino 
    }); 
    new google.maps.Marker({ 
     position: azulMarino, 
     map: map8 
    }); 
}); 

예 :

<div class="row"> <!-- Map --> 
<div id="map-ekin" class="map-profile"> 
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback" 
      defer> 
    </script> 
</div> 
</div> 

Answer 1

그래서, 여기에 간단한 제안입니다 여기에 코드입니다. 해당 페이지의 관련지도 ID와 함께 각 페이지의 헤드에 전역 변수를 선언하십시오.

<script> 
var mapId = 'lidertel'; 
</script> 

사항은 다음과 같이 당신의 JS 파일을 수정 :

window.onload = (function() { 
    var coordinates = { 
     lidertel: {lat: 43.300829, lng: -3.032376}, 
     ametsa: {lat: 43.306208, lng: -3.049617}, 
     ekin: {lat: 43.235692, lng: -3.008844}, 
     norbisca: {lat: 43.301795, lng: -2.947333}, 
     menesianos: {lat: 42.821056, lng: -2.799419}, 
     goval: {lat: 43.250875, lng: -2.896717}, 
     blueForce: {lat: 43.260901, lng: -2.926113}, 
     azulMarino: {lat: 43.260785, lng: -2.928851} 
    }; 

    var map = new google.maps.Map(document.getElementById('map-' + mapId), { 
     zoom: 13, 
     center: coordinates[mapId], 
     }); 
    new google.maps.Marker({ 
     position: coordinates[mapId], 
     map: map 
    }); 
}); 

그래서 올바른 좌표와 관련 <div>의 ID를 얻기 위해 그 mapId 변수를 읽을 수 있어야합니다. mapId 변수를 선언 한 후이 파일이로드되는지 확인해야합니다.