2016-06-22 101 views
0

我有問題編碼我的個人網站的谷歌地圖API。在我刷新瀏覽器之前,Google地圖不起作用。以下是谷歌地圖的腳本。谷歌地圖API需要刷新才能正常工作

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&v3"></script> 
      <script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>/js/mk.js"></script>   

     <script type="text/javascript"> 

     var geocoder; 
     var map; 
     function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
      zoom: 13, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
     } 

     function codeAddress(address) { 

     geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new MarkerWithLabel({ 

      position: results[0].geometry.location, 
      map: map, 
      labelContent: address, 
      labelAnchor: new google.maps.Point(22, 0), 
      labelClass: "labels", // the CSS class for the label 
      labelStyle: {opacity: 1.0} 

      }); 
      } else { 
       //alert("Geocode was not successful for the following reason: " + status); 
       } 
      }); 
      } 

     initialize(); 

     codeAddress("<?php 

      global $post; 
      $pid = $post->ID; 

      $terms = wp_get_post_terms($pid,'ad_location'); 
      foreach($terms as $term) 
      { 
       echo $term->name." "; 
      } 

      $location = get_post_meta($pid, "Location", true); 
      echo $location; 

     ?>"); 

     </script> 

我錯過了任何腳本?我沒有在其中添加API,但控制檯說:「您已經在此頁面上多次包含Google Maps API,這可能會導致意外錯誤。」

+0

你是否正在加載循環內的腳本?如果不是'mk.js''做什麼?順便說一下這些參數'sensor = false&v3'是不需要的。 – Erevald

+0

你檢查過是否有其他插件正在調用maps API嗎?檢查你的代碼字體並看看它。 –

回答

2

您需要確保地圖變量在您將其傳遞給markerOptions之前已初始化。

一些過分熱心的調試表明,在頁面失敗的時候,地圖仍然是未定義的。

The $(document).ready()通常會在body.onload之前發生,所以要麼在$(document).ready(function() { ... });的最上面調用initialize(),要麼將initialize的代碼放在那裏。

此外,雖然不是絕對必要的,但您應該考慮封裝您的地圖變量而不是使用全局變量。

+0

謝謝你的時間馬科斯。我將嘗試移動代碼以查看它的工作原理。 –