当我有8个变量时，带有JavaScript的Google地图只显示2个地图

嗨，伙计们，我正在尝试在不同的页面中显示不同的地图，但都使用相同的JavaScript文件。 我在每个映射中都使用了相同的代码（更改变量），但只有前两个有效。 我认为这是因为JavaScript文件从第一个页面获取ID，然后它不在其他页面中搜索其他ID，所以它说它们为null，并且没有找到它们。 如何让它在不同的HTML页面中搜索ID

提前谢谢。 代码如下：

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
    });
});

其中一个html的示例：

<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>

---

所以，这里有一个简单的建议。在每个页面的头部声明一个全局变量，并使用该页面的相关映射ID

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

---

因此，它应该能够读取

mapId

变量，以获得正确的坐标和相关

的ID。您可能需要确保在声明

mapId

变量后加载此文件。

发布API密钥不是一个好做法javascript开发人员控制台是否会给您带来一些错误？gmap异步脚本即

应该只在整个页面中出现一次。每次加载

google.maps.*

时，它都会填充导致奇怪的行为，它会执行js？key=&callback=initMap:98未捕获Vb{消息：“initMap不是函数”，名称：“InvalidValueError”，堆栈：“Error”↵ 在新的Vb（“}js？key=&callback=initMap:99中，您已经在该页面上多次包含Google Maps API。这可能会导致意外错误。在这个页面中，我测试了在索引处取出脚本，但它不起作用。（在页脚中有一个api键为js？key=&callback=initMap:88的映射未捕获类型错误：无法读取对象处null的属性'firstChild'。在map.js:40处的new Ag（js？key=&callback=initMap:90）处的.vg（js？key=&callback=initMap:88）

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
    });
});