Question

我已经为这个问题搜索了很多解决方案，但没有找到适合我的方法。我想将Google地图集成到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;

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

Answer 1

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

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

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

1 个答案: