MissingKeyMapError:在本地主机上使用Google Maps Autocomplete文本框时出错

时间:2016-08-18 16:07:29

标签: javascript html google-maps google-maps-api-3 autocomplete

我正在尝试使用以下代码在HTML中实现Google地图自动填充文本框

HTML:

<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>

<body>
 ...
<input type="" name="loc" class="form-control" id="location" value="">
 ...
</body>

JavaScript的:

<script>
   function init() {
    var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input);
     }
     google.maps.event.addDomListener(window, 'load', init);
 </script>

如果我在普通浏览器中打开HTML文件而不使用任何服务器或本地主机,则上述代码工作正常。当我在本地主机上使用相同的代码,并单击文本框时,文本框会自动禁用并抛出以下错误:

Google Maps API error: MissingKeyMapError  js?v=3.exp&sensor=false&libraries=places:34 

我指的是此文档ERROR: Google Maps API error: MissingKeyMapError,它说现在使用Google Maps API需要在2016年6月22日之后使用密钥。我创建了密钥并使用了文档https://developers.google.com/maps/documentation/javascript/get-api-key中提到的库,但是由于文本框没有选择库,所以没有运气。

尝试使用为我生成的密钥替换YOUR_API_KEY的库:

  <script async defer src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

当我使用这个库时,它根本没有选择任何位置,文本框显示为空。

只有在本地主机上使用Google API时才会出现此问题。有人可以帮我解决这个错误吗? 生成密钥后,应该使用哪个确切的库?

使用以下两个库后,我收到以下错误:

 <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry,places">

 <script async defer src="https://maps.googleapis.com/maps/api/js? libraries=places&key=API_KEY&callback=initMap"

型=&#34;文本/ JavaScript的&#34;&GT;

错误:

Uncaught js?  libraries=places&key=AIzaSyAI_DaubDzVzYzVoVJ83Pc_KJAMd0HeNlQ&callback=initMap:95 InvalidValueError: initMap is not a function

我使用的是前面提到的相同的javascript代码。

1 个答案:

答案 0 :(得分:1)

您需要同时包含密钥(localhost作为允许的引荐来源)和地方库。

<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>

来自the documentation on libraries

  

以下引导请求说明了如何请求Maps Javascript API的google.maps.geometry库:

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
</script>