为何第二个Google Maps嵌入div与文本重叠？求解决方案

制作邀请函落地页时，添加了两个地图容器div，第一个地图显示正常，但第二个地图与上方的文本内容重叠，截图如下：

以下是相关代码：

<div class="col-md-6">
    <div class="text-center text-md-left ml-md-3">
        <h4 class="mb-3">Holy Matrimony</h4>
        <p class="mb-2">Gereja HKBP Jatiwaringin, Jakarta Timur</p></p>
        <p class="mb-0">14:30PM - 15:30PM</p>
    </div>
</div>
<br>
<div id="wrapper-9cd199b9cc5410cd3b1ad21cab2e54d3">
    <div id="map-9cd199b9cc5410cd3b1ad21cab2e54d3"></div><script>(function () {
    var setting = {"height":260,"width":310,"zoom":16,"queryString":"Gereja HKBP Jatiwaringin, RT.7/RW.6, Cipinang Melayu, East Jakarta City, Jakarta, Indonesia","place_id":"ChIJJTtA-tOMaS4RQ2QWfy6gFoY","satellite":false,"centerCoord":[-6.2502256017392215,106.91757155],"cid":"0x8616a02e7f166443","lang":"en","cityUrl":"/indonesia/jakarta","cityAnchorText":"Map of Jakarta, Java, Indonesia","id":"map-9cd199b9cc5410cd3b1ad21cab2e54d3","embed_id":"898388"};
    var d = document;
    var s = d.createElement('script');
    s.src = 'https://1map.com/js/script-for-user.js?embed_id=898388';
    s.async = true;
    s.onload = function (e) {
      window.OneMap.initMap(setting)
    };
    var to = d.getElementsByTagName('script')[0];
    to.parentNode.insertBefore(s, to);
  })();</script><a href="https://1map.com/map-embed">1 Map</a></div>
<br>
<div class="col-md-6">
    <div class="text-center text-md-left ml-md-3">
        <h4 class="mb-3">The Reception</h4>
        <p class="mb-2">Rhema Convention Hall, Bekasi</p>
        <p class="mb-0">19:00PM - 21:00PM</p>
    </div>
</div>
<br>
<div id="wrapper-9cd199b9cc5410cd3b1ad21cab2e54d3">
    <div id="map-9cd199b9cc5410cd3b1ad21cab2e54d3"></div><script>(function () {
    var setting = {"height":260,"width":310,"zoom":16,"queryString":"Rhema Convention Hall, Jakasampurna, Bekasi City, West Java, Indonesia","place_id":"ChIJtRGzWf-MaS4RsIECDJBz_e0","satellite":false,"centerCoord":[-6.249366001739006,106.95926959999998],"cid":"0xedfd73900c0281b0","lang":"en","cityUrl":"/indonesia/jakarta","cityAnchorText":"Map of Jakarta, Java, Indonesia","id":"map-9cd199b9cc5410cd3b1ad21cab2e54d3","embed_id":"898388"};
    var d = document;
    var s = d.createElement('script');
    s.src = 'https://1map.com/js/script-for-user.js?embed_id=898388';
    s.async = true;
    s.onload = function (e) {
      window.OneMap.initMap(setting)
    };
    var to = d.getElementsByTagName('script')[0];
    to.parentNode.insertBefore(s, to);
  })();</script><a href="https://1map.com/map-embed">1 Map</a></div>
</div>
</div>

已尝试调整嵌入代码位置并添加<br>标签，问题仍未解决，寻求修复方案。

核心问题 #

重叠问题的根源是重复使用了相同的ID。HTML规范要求页面内元素ID必须唯一，你两个地图的容器wrapper和map都用了同一个ID，导致第二个地图的初始化脚本无法正确定位目标容器，最终出现渲染异常。

修复步骤 #

1. 为每个地图容器设置唯一ID
2. 对应修改地图初始化脚本中的id参数，确保指向正确容器
3. 用Bootstrap间距类（如mb-4）替代<br>，实现更可控的布局

修改后的完整代码 #

<!-- 第一个地图区块 -->
<div class="col-md-6 mb-4">
    <div class="text-center text-md-left ml-md-3">
        <h4 class="mb-3">Holy Matrimony</h4>
        <p class="mb-2">Gereja HKBP Jatiwaringin, Jakarta Timur</p>
        <p class="mb-0">14:30PM - 15:30PM</p>
    </div>
</div>

<div id="wrapper-matrimony" class="mb-4">
    <div id="map-matrimony"></div>
    <script>(function () {
        var setting = {"height":260,"width":310,"zoom":16,"queryString":"Gereja HKBP Jatiwaringin, RT.7/RW.6, Cipinang Melayu, East Jakarta City, Jakarta, Indonesia","place_id":"ChIJJTtA-tOMaS4RQ2QWfy6gFoY","satellite":false,"centerCoord":[-6.2502256017392215,106.91757155],"cid":"0x8616a02e7f166443","lang":"en","cityUrl":"/indonesia/jakarta","cityAnchorText":"Map of Jakarta, Java, Indonesia","id":"map-matrimony","embed_id":"898388"};
        var d = document;
        var s = d.createElement('script');
        s.src = 'https://1map.com/js/script-for-user.js?embed_id=898388';
        s.async = true;
        s.onload = function (e) {
          window.OneMap.initMap(setting)
        };
        var to = d.getElementsByTagName('script')[0];
        to.parentNode.insertBefore(s, to);
      })();</script>
</div>

<!-- 第二个地图区块 -->
<div class="col-md-6 mb-4">
    <div class="text-center text-md-left ml-md-3">
        <h4 class="mb-3">The Reception</h4>
        <p class="mb-2">Rhema Convention Hall, Bekasi</p>
        <p class="mb-0">19:00PM - 21:00PM</p>
    </div>
</div>

<div id="wrapper-reception">
    <div id="map-reception"></div>
    <script>(function () {
        var setting = {"height":260,"width":310,"zoom":16,"queryString":"Rhema Convention Hall, Jakasampurna, Bekasi City, West Java, Indonesia","place_id":"ChIJtRGzWf-MaS4RsIECDJBz_e0","satellite":false,"centerCoord":[-6.249366001739006,106.95926959999998],"cid":"0xedfd73900c0281b0","lang":"en","cityUrl":"/indonesia/jakarta","cityAnchorText":"Map of Jakarta, Java, Indonesia","id":"map-reception","embed_id":"898389"};
        var d = document;
        var s = d.createElement('script');
        s.src = 'https://1map.com/js/script-for-user.js?embed_id=898389';
        s.async = true;
        s.onload = function (e) {
          window.OneMap.initMap(setting)
        };
        var to = d.getElementsByTagName('script')[0];
        to.parentNode.insertBefore(s, to);
      })();</script>
</div>

额外说明 #

• 第二个地图的embed_id改为898389与第一个区分，你也可以重新在1map官网生成第二个地图的嵌入代码，确保参数完全独立
• 使用mb-4替代<br>，能更精准控制元素间距，避免布局混乱

内容的提问来源于stack exchange，提问作者RVdigital