Google Maps API Javascript in Wordpress

Question

希望你们能回答这个问题！我认为它应该相对容易，但我似乎无法控制它。

如何在Wordpress文章/页面中加载Google Maps API Javascript？

WordPress的食典似乎表明，在您的主题头引用您的JavaScript文件，然后需要调用职位内的功能。

我如下提到的谷歌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> 

但是，这只是创建一个空框。我已经尝试在帖子中调用预定义的Google JS函数，但这似乎并没有奏效。

有没有人在Wordpress上实现Google地图上的Google地图？我可以直接将所有代码粘贴到帖子中，但Google Map中出现了很多bug。

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

Answer 1

我只是看看你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到您的网页。

Answer 2

使用WordPress，您绝对不应该将js编码到页眉或页脚中。取而代之的是在函数中使用wp_enqueue_script，这个函数被挂在functions.php中的wp_enqueue_scripts动作中。例如：

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作为函数名的前缀。您可以添加依赖版本号或使用其他变量将其移至页脚，有关更多信息，请参阅代码。在你的情况下，你可能想在条件中包装wp_enqueue_script，所以它只会加载在你需要的帖子或页面上。