Javascript 将Google Maps API v3集成到WordPress页面中

我已经为这个问题寻找了很多解决方案，但没有一个对我有效。我想将谷歌地图集成到Wordpress页面中，不使用插件也不嵌入

在header.php的开头，我附加了以下内容：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=*********&sensor=true"> </script>

---

如果有人有解决方案，我会非常感激，非常感谢

您可以将代码放入js文件中，并在api脚本包含后加载它。 稍微干净一点的代码是：

(function () {
    function initMap() {
        var mapOptions = {
            center: new google.maps.LatLng(50.371, -4.136),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initMap);
}());

---

使用此自调用匿名函数，您不会引入全局变量并封装代码。

您是使用page.php还是使用其他自定义模板页面进行页面？我使用的是自定义模板页面，因此您可以将脚本放在该页面上，否则您也可以将脚本放在页眉或页脚中。您为什么要加载两次google maps api？第一个在head中作为脚本include，第二个在loadScript函数中。初始化函数也被附加了两次。如果使用“addDomListener”附加函数，则不需要“onload=”initialize（）”。如果使用此代码创建js文件，应在何处调用它？在自定义模板页面的代码编辑器中？谢谢！自定义页面听起来不错。你写道你已经将脚本include添加到header.php中了？！如果您只需要此自定义页面上的地图，则应仅在自定义模板中包含此地图。否则google maps api将加载到每个页面上。我尝试将整个脚本和脚本包含在自定义页面的文本编辑器中，但不起作用。

function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(50.371, -4.136),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDo2uLLlKn3xuYolvd0VNzBujoZ952YywE&sensor=true&callback=initialize";
        document.body.appendChild(script);
        }
window.onload = loadScript;

(function () {
    function initMap() {
        var mapOptions = {
            center: new google.maps.LatLng(50.371, -4.136),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initMap);
}());