谷歌地图 API javascript 集成 wordpress答案

【问题标题】：Google maps API javascript integration wordpress谷歌地图 API javascript 集成 wordpress
【发布时间】：2014-07-26 06:59:43
【问题描述】：

我一直在努力将 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。我把它们放在 head 部分但在现有的 php 标签之外。顺便说一句...带有地图的页面名称是Test5。

根据我阅读的内容，第二部分代码应该是这样，因此护目镜映射 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 和使用谷歌地图 API 方面，我是个菜鸟，所以请尽可能对菜鸟友好地做出解释 :)

【问题讨论】：

标签： javascript wordpress google-maps-api-3

【解决方案1】：

您在每个页面上都包含 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)

【讨论】：

为我工作。谢谢！
很高兴听到。你能接受我的回答吗（点击旁边的复选标记）？这就是我们在这里说谢谢的方式；）