Wordpress中的Google Maps API Javascript

Question

希望你们能回答这个问题！我认为这应该是相对容易的，但我似乎就是不能掌握它。

如何在Wordpress帖子/页面中加载Google Maps API Javascript？

Wordpress Codex似乎建议，在主题的头中引用javascript文件后，您需要在post中调用函数。

我在标题中引用了Google Javascript文件，如下所示：

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

然后转到我的javascript文件，所有的API代码也在头中：

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js"></script>

然后，我在帖子中使用了以下代码：

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js">
</script>
<script type="text/javascript">
</script>
<div id="map-canvas">
</div>

但这只会创建一个空盒子。我尝试在post中调用预定义的Google JS函数，但似乎也不起作用。

有没有人已经在Wordpress上实现了Google Maps？我可以直接将所有代码粘贴到帖子中，但Google Map出来时充满了错误。

任何想法都将不胜感激！非常感谢。

Answer 1

使用WordPress，你永远不应该在页眉或页脚中硬编码js。取而代之的是，在连接到functions.php中wp_enqueue_scripts操作的函数中使用wp_enqueue_script。例如：

function add_scripts() {
  wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false');
  wp_enqueue_script('google-jsapi','https://www.google.com/jsapi');     
}
add_action('wp_enqueue_scripts', 'add_scripts')

您可能希望在函数名前加上一个唯一的slug。您可以添加依赖项版本号或将其移动到带有其他变量的页脚，请参阅codex以了解更多信息。在您的例子中，您可能希望将wp_enqueue_script包装在一个条件中，以便它只加载到您需要它的帖子或页面上。

Answer 2

我刚看了你的http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js文件

你不应该在里面有<script>标签！

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

我建议您在javascript控制台中查看错误，并学习使用wp_enqueue_script()将javascript添加到页面。