Google Places API未加载 [英] Google Places API not loading
本文介绍了Google Places API未加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一段代码昨天晚上工作得很好，使用地方图书馆来处理Google地图的自动完成功能，但是今天早上，我完全无法使它工作.
I have a piece of code which was working great yesterday evening with places library to handle google maps autocomplete but this morning, I am totally unable to make it work.
我收到以下错误:
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?
我做错什么了吗?
Is there any chance the google disabled the API for my referer ?
Am I doing something wrong ?
推荐答案
尝试设置sensor = false，例如:
Try setting sensor=false , like:
<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>
我遇到了类似的问题，即自动填充功能今天早上停止工作，没有任何变化.我一直跟踪到此更改，然后它再次起作用.
I had a similar issue, where autocomplete stopped working this morning, with no changes. I tracked it down to this change, and it works again.
这篇关于Google Places API未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
