2014-03-25 68 views
1

我有一段代碼,昨天晚上工作很棒,有地方圖書館來處理谷歌地圖自動完成,但今天早上,我完全無法使它工作。Google Places API無法加載

我收到以下錯誤:

Cannot read property 'Autocomplete' of undefined 

線產生錯誤

var searchBox = new google.maps.places.Autocomplete($("#searchBox")[0], { 
    types: ['(regions)'], 
    componentRestrictions: {country: "fr"} 
}); 

庫是腳本之前加載

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&sensor=true"></script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> 

全碼:

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>ImmoGéo</title> 
    <link rel="stylesheet" href="style.css" /> 
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 
</head> 
<body> 
    <div id="share" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> 
        <h4 class="modal-title">Partager</h4> 
       </div> 
       <div class="modal-body"> 
        <input type="text" id="share-url" class="form-control"/> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div id='panel'> 
     <div id="title">RECHERCHE</div> 
     <div id="content"> 
      <div id="search" class="input-group"> 
       <input type="text" autocomplete="off" id="searchBox" class="form-control" placeholder="Recherche"/><span style="cursor: pointer;" data-toggle="modal" data-target="#share" class="input-group-addon"><img src="img/share.png" height="20px"/></span> 
      </div> 
      <div class="btn-group btn-group-justified"> 
       <a class="btn btn-info" >ACHETER</a> 
       <a class="btn btn-info" >LOUER</a> 
      </div> 
      <div id="criteria"> 

      </div> 
     </div> 

    </div> 
    <div id='map-canvas'></div> 
</body> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&sensor=true"></script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

<script type='text/javascript'> 

    function togglePanel() 
    { 
     if($("#panel").css("right") == "-400px"){ 
      $("#panel").animate({"right": "0px"}, 800, 'easeInOutQuart', function(){ 
       $("#searchBox").focus(); 
      }); 
     } 
     else { 
      $(".pac-container").hide(); 
      $("#panel").animate({"right": "-400px"}, 800, 'easeInOutQuart'); 
     } 


    } 

    function init() 
    { 
     //set title style 
     $("#title").css("width", 3*(($(window).width())/100)); //width button 3% 
     $("#title").css("left", "-"+3*(($(window).width())/100)+"px"); //left -3% 

     $("#title").click(function(){ 
      togglePanel(); 
     }); 

     //add listeners on #actions 

     //LOCATING USER 
     userPosition = new Object(); 
     userPosition.latitude = 48.85; 
     userPosition.longitude = 2.4; 

     if (navigator.geolocation) 
     { 
      navigator.geolocation.watchPosition(
       function (pos){ 
        if(userPosition.latitude != pos.coords.latitude || userPosition.longitude != pos.coords.longitude) 
        { 
         userPosition.latitude = pos.coords.latitude; 
         userPosition.longitude = pos.coords.longitude; 
         pos = new google.maps.LatLng(userPosition.latitude, userPosition.longitude); 
         map.panTo(pos); 
        } 
       }, 
       null, 
       {enableHighAccuracy:true} 
      );    
     } 
     else 
      alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5"); 

     //MAP OPTIONS 
     map = new google.maps.Map(document.getElementById("map-canvas"),{ 
      center: new google.maps.LatLng(userPosition.latitude, userPosition.longitude), 
      streetViewControl: false, 
      zoom: 12, 
      mapTypeControl: true 
     }); 

     //SEARCHBOX 
     var searchBox = new google.maps.places.Autocomplete($("#searchBox")[0], { 
      types: ['(regions)'], 
      componentRestrictions: {country: "fr"} 
     }); 

     google.maps.event.addListener(searchBox, 'place_changed', function() { 
      var place = searchBox.getPlace(); 
      if(typeof searchMarker !== 'undefined') 
       searchMarker.setMap(null); 

      if (place.geometry.viewport) { 
       map.fitBounds(place.geometry.viewport); 
      } else { 
       map.setCenter(place.geometry.location); 
       map.setZoom(13); // Why 13? Because it looks good. 
      } 
      //create markers for each results 
      searchMarker = new google.maps.Marker({ 
       map: map, 
       title: place.name, 
       position: place.geometry.location 
      }); 
     }); 
    } 

    $(document).load(init()); 

</script> 

有沒有可能讓google禁用我的引用API的API?
我做錯了什麼?

回答

0

嘗試設置傳感器=假,如:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=false"></script> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 

我有一個類似的問題,在停止自動完成今天上午的工作,沒有變化。我追蹤到這一變化,並再次運作。

1

您正在加載谷歌API兩次:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=true"></script> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script> 

你必須這兩個環節合併成一個,如:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA0t5XuHRGcvsOoWNS3QJGJyxgkdoC_V5E&libraries=places&sensor=true"></script> 

除此之外,其他一些環節上都在開始丟失了http:。檢查您的控制檯日誌以查找錯誤消息

+0

思想庫=地方將只加載地方的方法。我的錯。 幹得好,但爲什麼它突然停止工作? – JeanneD4RK