javascript - 谷歌 map API javascript集成wordpress

我一直在努力将google maps api集成到wordpress页面中，最后得到它。

我加了

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

和

<body <?php if (is_page('Test5')) { echo 'onload="initialize()" onunload="GUnload()"'; } ?>>

到header.php。我把它们放在头部，但在现有的php标签之外。顺便说一句...带有地图的页面名称是Test5。

从我阅读的内容来看，代码的第二部分应该做到这一点，以使Goggle Maps javascript仅在页面“ Test5”上加载。我在javascript URL中添加了一个虚拟API密钥，以查看脚本是否正在每个页面上加载，并且足够确定。我在每个页面上看到无效的api键弹出窗口。

我哪里做错了？

这是我使用“文本”选项卡添加到页面（'Test5'）的代码。以防万一您需要查看它。

<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

关于自定义wordpress和使用google maps API，我是一个菜鸟，所以请尽可能地对菜鸟做一个友好的解释：）

最佳答案

您将在每个页面上都包含Google JavaScript，但只能在Test5页面上运行它。要将其仅加载到Test5上，请在要排队的位置添加一个检查，如下所示：

<?php if (is_page('Test5')) { ?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=true"> </script>
<?php } ?>

其他一些注意事项：

最好使用wp_enqueue_script，而不是在header.php中对其进行硬编码。它允许扩展您的代码的人在必要时用其他版本替换它，而无需更改您的代码
如果我正确阅读以下内容：google.maps.event.addDomListener(window, 'load', initialize);，则无论如何您都是在页面加载时调用initialize-您无需在body标记中使用额外的逻辑（如果您确定需要GUnload，则可能在同一位置执行-类似于this answer）

test5

javascript - 谷歌 map API javascript集成wordpress