谷歌地图作为 div 背景在 wordpress 中不起作用。在 HTML 中工作

Question

我建立了一个联系人页面，其中包含一个以谷歌地图为背景的横幅。这本来是一个基本的网站，但现在已经变成了一个 wordpress 博客。

在我的基本 html 网站中工作的这个 gmaps 横幅不再在 wordpress 中显示任何内容。

Chrome 工具给了我这个错误信息：

http://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot2&rt=main.52 加载资源失败：net::ERR_BLOCKED_BY_CLIENT

按照其他人的建议，我已尝试关闭广告拦截器，但没有奏效。我也试过用这个插件：Leaflet Maps Marker

但这会输出一个简码，我不知道如何将它插入到我的标题中。

使用的脚本：

<!-- Include the Google Maps API library - required for embedding maps -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 
<script type="text/javascript">
 
// The latitude and longitude of your business / place
var position = [52.1656463, 8.6104517];
 
function showGoogleMaps() {
 
    var latLng = new google.maps.LatLng(position[0], position[1]);
 
    var mapOptions = {
        zoom: 16, // initialize zoom level - the max value is 21
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: true, // allow users to zoom the Google Map
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latLng
    };
 
    map = new google.maps.Map(document.getElementById('googlemaps'),
        mapOptions);
 
    // Show the default red marker at the location
    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP
    });
}
 
google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>

它会影响这个 div：

<!-- Banner -->
      <div class="grid">
        <div class="col-12">
            <div class="banner">
                <div id="googlemaps"></div>
              <div class="banner-title">
                <header>Kontakt</header>
              </div>
            </div>
        </div>
      </div>

和样式：

#googlemaps { 
  height: 100%; 
  width: 100%; 
  position:absolute; 
  top: 0; 
  left: 0; 
  z-index: 0;
}

对此的任何帮助将不胜感激:)

Answer 1

首先我会尝试更改 css 并增加 z-index。用像 1000 这样的大数来测试它

如果这不起作用，您提到使用 Leaflet 插件。您可以使用以下代码将简码添加到 php 文件中

<?php
echo do_shortcode('[mapsmarker....]');
?>

https://codex.wordpress.org/Function_Reference/do_shortcode