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

Integrate Google Maps API v3 into a WordPress page

本文关键字：WordPress 集成 Google Maps API v3      更新时间：2023-09-26

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

在header.php的标题中，我附加了以下内容：

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

然后也在header.php中，我放了这个：

<body onload="initialize()">

但现在我不知道该把脚本放在哪里：

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;

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

您可以将代码放入一个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);
}());

通过这个自调用匿名函数，您不会引入全局变量并封装代码。

相关文章：