Wordpress中的Google Maps API Javascript

Question

希望你们能回答这个问题!我认为它应该相对容易,但我似乎无法掌握它.

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

Wordpress Codex似乎建议您在主题的标题中引用您的javascript文件,然后您需要调用帖子中的函数.

我在标题中提到了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>

但这只会创建一个空盒子.我已经尝试在帖子中调用预定义的Google JS函数,但这似乎也没有用.

是否有人在Wordpress上实施谷歌地图已经做到了这一点？我可以将所有代码直接粘贴到帖子中,但谷歌地图充满了错误.

任何想法将不胜感激!非常感谢.

Answer 1

使用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为函数名称添加前缀.您可以添加依赖项版本号或使用其他变量将其移动到页脚,有关详细信息,请参阅codex.在你的情况下,你可能想要包装wp_enqueue_script一个条件,所以它只加载你需要它的帖子或页面.