谷歌地图API-试图在两个单独的HTML页面上有一个地图，但其中一个发生了错误

Question

"映射：应为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=YOUR_API_KEY&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=YOUR_API_KEY&callback=
initMap&libraries=&v=weekly" async></script>

CSS：

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

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

错误：Se｛message:"Map:应为Element类型的mapDiv，但已传递null&"；，名称："；InvalidValueError"；，堆栈："；错误↵在新Se(https://maps.googleapis.com/m…6ho4&callback=initMap&库=&v＝每周：156:128〃}

Answer 1

试试这个：

来源：地图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,
});

Answer 2

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

Step1:转到https://www.google.com/maps
步骤2：输入要嵌入的位置
步骤3：单击菜单->共享或嵌入地图->嵌入地图标签
步骤4：复制iframe标签并将其粘贴到HTML文件中

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

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