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，所以它只會加載在你需要的帖子或頁面上。