我有一段代碼,昨天晚上工作很棒,有地方圖書館來處理谷歌地圖自動完成,但今天早上,我完全無法使它工作。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?
我做錯了什麼?
思想庫=地方將只加載地方的方法。我的錯。 幹得好,但爲什麼它突然停止工作? – JeanneD4RK