Google MAPS API - 尝试在两个单独的 HTML 页面上创建地图，但在其中一个页面上出现错误答案

【问题标题】：Google MAPS API - Trying to have a map on two separate HTML pages but on one of them an error occursGoogle MAPS API - 尝试在两个单独的 HTML 页面上创建地图，但在其中一个页面上出现错误
【发布时间】：2021-08-08 01:11:27
【问题描述】：

“地图：预期为 Element 类型的 mapDiv，但被传递为 null。”

-div的高度在css中设置。

Javascript (googleMaps.js)：

    function initMap() {
    try {
   

      const sportHall2 = { lat: 51.18310959584043, lng: 
         4.38829092697164 }; 
     
        const map2 = new google.maps.Map(document.getElementById("map-2"), 
        {
          zoom: 13,
          center: sportHall2,
          disableDefaultUI: true,
          zoomControl: true,
          fullscreenControl: true,
          streetViewControl: true,
        });
    
        const map2b = new google.maps.Map(document.getElementById("map-2b"), {
          zoom: 13,
          center: sportHall2,
          disableDefaultUI: true,
          zoomControl: true,
          fullscreenControl: true,
          streetViewControl: true,
        });
        } catch (error) {
        console.log(error);
      } 
    }

HTML 第 1 页：

 <script src="/scripts/googleMaps.js"></script>
          <div class="grid-card">
                <h3>Pius X-instituut</h3>
                <h5>Bekijk de sporthal hier.</h5>
                <p>Adres: Hof Van Tichelen 28 2020 Antwerpen</p>
                <div id="map-2"></div>
            </div>
    <script src="/scripts/googleMaps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js? 
    key=AIzaSyDsZ0rx4aEk6eegfEHbfAl2Z_IA8iY6ho4&callback=
    initMap&libraries=&v= 
    weekly" async></script>

HTML 第 2 页（发生错误，地图不会显示在此页面上）：

  <script src="/scripts/googleMaps.js"></script>

        <div class="grid-card map-2b-container">
            <h3>Pius X-instituut</h3>
            <h5>Bekijk de sporthal hier.</h5>
            <p>Adres: Hof Van Tichelen 28 2020 Antwerpen</p>
            <div id="map-2b"></div>
        </div>

    <script src="/scripts/googleMaps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js? 
    key=AIzaSyDsZ0rx4aEk6eegfEHbfAl2Z_IA8iY6ho4&callback=
    initMap&libraries=&v=weekly" async></script>

CSS：

#map-2{
height: 300px;
width: 100%;
}
 
#map-2b{
height: 300px;
width: 100%;
}

错误： Se {message: "Map: 预期 mapDiv 类型为 Element 但已通过 null.", name: "InvalidValueError", stack: "Error↵ at new Se (https://maps.googleapis.com/m… 6ho4&callback=initMap&libraries=&v=weekly:156:128"}

【问题讨论】：

你在使用打字稿吗？
请提供一个minimal reproducible example 来证明您的问题。
我正在使用 JavaScript。 @geocodezip 谢谢你的建议，我相信现在应该是一个reprex/mcve/mwe。
我希望您在两个页面上都会遇到该错误（每个页面都尝试访问两个 div，但每个页面只有一个......）。如果 div 存在，也许只能访问它；或在两个页面上为地图 div 使用相同的名称。
有道理，我为地图 div 尝试了相同的名称，但没有任何区别。我还尝试在运行同样不起作用的功能之前检查 div 是否存在。之后，我尝试在两个 HTML 页面上同时使用地图 div 元素，并且在 HTML 页面 1 上仍然只显示 map-2，而在 HTML 页面 2 上没有加载任何地图。错误保持不变。

标签： javascript html css google-maps-api-3

【解决方案1】：

试试这个：

来源：Maps API

const mapDiv = document.getElementById("map-2b");

const map2b = new google.maps.Map(mapDiv), {
    zoom: 13,
    center: sportHall2,
    disableDefaultUI: true,
    zoomControl: true,
    fullscreenControl: true,
    streetViewControl: true,
});

【讨论】：

感谢您的建议，但我仍然遇到同样的错误。

【解决方案2】：

您是否尝试过使用 iframe 嵌入谷歌地图？如果没有，那么这是在 HTML 中添加地图的最简单方法。

步骤一：去https://www.google.com/maps
Step2：输入您要嵌入的位置。
第三步：点击菜单 -> 分享或嵌入地图 -> 嵌入地图标签
Step4：复制iframe标签并粘贴到HTML文件中

【讨论】：

感谢您的建议，但是很难让 iframe 的响应能力达到我想要的效果。

【解决方案3】：

   function initMap() {
   try {
   

   const sportHall2 = { lat: 51.18310959584043, lng: 
     4.38829092697164 }; 

   if(document.getElementById('map-2')){
    const map2 = new google.maps.Map(document.getElementById("map-2"), {
        zoom: 13,
        center: sportHall2,
        disableDefaultUI: true,
        zoomControl: true,
        fullscreenControl: true,
        streetViewControl: true,
    });
  }
}

上面的代码通过在每个单独的页面“map-2”上设置两个 div Id 并在运行 Map() 构造函数之前检查 div 是否存在来工作。

【讨论】：