Wordpress中的Google Maps API Javascript [英] Google Maps API Javascript in Wordpress

问题描述

希望你们能回答这个问题！我认为它应该相对简单，但我似乎无法掌握它。

Hope you guys can answer this question! I'm thinking it should be relatively easy but I just can't seem to get to grips with it.

如何在内部加载Google Maps API Javascript一个Wordpress帖子/页面？

How do you go about loading the Google Maps API Javascript within a Wordpress post/page?

Wordpress Codex似乎建议你在主题的标题中引用你的javascript文件，然后你需要调用你的主题中的函数发布。

The Wordpress Codex would seem to suggest that having referred to your javascript file in the header of your theme you then need to call the functions within the post.

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

I've referred to the Google Javascript files in the header as follows:

<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代码：

and then to my javascript file with all the API code in the header too:

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

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

I've then used the following code in the post:

<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函数，但这似乎也没有用。

But this just creates an empty box. I've tried calling the predefined Google JS functions within the post but this doesn't appear to have worked either.

是否有人在Wordpress上实现谷歌地图已经这样做了吗？我可以将所有代码直接粘贴到帖子中，但谷歌地图中充满了错误。

Is there anybody implementing Google Maps on Wordpress that has already done this? I can paste all the code directly into the post but the Google Map comes out full of bugs.

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

Any ideas would be greatly appreciated! Many thanks.

推荐答案

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

With WordPress you should never hard code js into the header or footer. Instead use wp_enqueue_script inside a function hooked into the wp_enqueue_scripts action in functions.php. For example:

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 ，因此它只会加载到您需要的帖子或页面上。

You would want to prefix the function name with a unique slug. You could add dependencies version numbers or move it to the footer with additional variables, see the codex for more info. In your case you probably want to wrap wp_enqueue_script in a conditional so it only loads on the posts or pages you need it for.

这篇关于Wordpress中的Google Maps API Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！