谷歌地图API javascript集成wordpress

Google maps API javascript integration wordpress

本文关键字：wordpress 集成 javascript API 谷歌地图      更新时间：2023-09-26

我一直在努力将谷歌地图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密钥弹出每个页面。

我哪里做错了?

以下是我使用"Text"选项卡添加到页面('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时，我是一个新手，所以请尽可能地对新手友好进行解释:)

在每个页面上都包含了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，你可能会在同一个地方这样做-类似于这个答案)
相关文章：