此页面未正确加载Google地图。查看JavaScript控制台了解技术细节 [英] This page didn't load Google Maps correctly. See the JavaScript console for technical details

问题描述

我使用 Google Map API 中的这段代码，它不起作用

 <！DOCTYPE html> 
< html> 
< head> 
< title>放置自动填充< / title> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> 
< meta charset =utf-8> 
< style> 
 html，body {
 height：100％; 
保证金：0; 
 padding：0; 
} 
 #map {
 height：100％; 
} 
 .controls {
 margin-top：10px; 
 border：1px透明; 
 border-radius：2px 0 0 2px; 
 box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 height：32px; 
概述：无; 
 box-shadow：0 2px 6px rgba（0，0，0，0.3）; 
} 
＃pac-input {
 background-color：#fff; 
 font-family：Roboto; 
 font-size：15px; 
 font-weight：300; 
 margin-left：12px; 
 padding：0 11px 0 13px; 
文本溢出：省略号; 
 width：300px; 
} 
 
＃pac-input：focus {
 border-color：＃4d90fe; 
} 
 
 .pac-container {
 font-family：Roboto; 
} 
 
＃type-selector {
 color：#fff; 
背景颜色：＃4d90fe; 
 padding：5px 11px 0px 11px; 
} 
 
＃类型选择器标签{
 font-family：Roboto; 
 font-size：13px; 
 font-weight：300; 
} 
< / style> 
< / head> 
< body> 
< input id =pac-inputclass =controlstype =text
 placeholder =Enter a location> 
< div id =type-selectorclass =controls> 
< input type =radioname =typeid =changetype-allchecked =checked> 
< label for =changetype-all>全部< / label> 
 
< input type =radioname =typeid =changetype-establishment> 
< label for =changetype-establishment>机构< / label> 
 
< input type =radioname =typeid =changetype-address> 
< label for =changetype-address>地址< / label> 
 
< input type =radioname =typeid =changetype-geocode> 
< label for =changetype-geocode> Geocodes< / label> 
< / div> 
< div id =map>< / div> 
 
< script> 
 //这个例子需要Places库。第一次加载API时，请包含libraries = places 
 //参数。例如：//< script src =https://maps.googleapis.com/maps/api/js？key = YOUR_API_KEY& libraries = places> 
 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 center：{lat：-33.8688，lng ：151.2195}，
 zoom：13 
}）; 
 var input = / ** @type {！HTMLInputElement} * /（
 document.getElementById（'pac-input'））; 
 
 var types = document.getElementById（'type-selector'）; 
 map.controls [google.maps.ControlPosition.TOP_LEFT] .push（input）; 
 map.controls [google.maps.ControlPosition.TOP_LEFT] .push（types）; 
 
 var autocomplete = new google.maps.places.Autocomplete（input）; 
 autocomplete.bindTo（'bounds'，map）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 var marker = new google.maps.Marker（{
 map：map，
 anchorPoint：new google.maps.Point（0，-29）
}）; 
 
 autocomplete.addListener（'place_changed'，function（）{
 infowindow.close（）; 
 marker.setVisible（false）; 
 var place = autocomplete。 getPlace（）; 
 if（！place.geometry）{
 window.alert（Autocomplete返回的地方不包含几何图形）; 
 return; 
} 
 $ 
 if（place.geometry.viewport）{
 map.fitBounds（place.geometry.viewport）; 
 $ b //如果地点有一个几何图形， b} else {
 map.setCenter（place.geometry.location）; 
 map.setZoom（17）; //为什么是17？因为它看起来不错。
} 
 marker .setIcon（/ ** @type {google.maps.Icon} * /（{
 url：place.icon，
 size：new google.maps.Size（71，71），
原点：新的google.maps.Point（0，0），
 anchor：新的google.maps.Point（17，34），
 scaledSize：新的google.maps.Size（35，35） 
}））; 
 marker.setPositi上（place.geometry.location）; 
 marker.setVisible（true）; 
 
 var address =''; 
 if（place.address_components）{
 address = [
（place.address_components [0]&& place.address_components [0] .short_name ||''），
（place.address_components [1]&& place.address_components [1] .short_name ||''），
（place.address_components [2]&& place.address_components [2] .short_name | |''）
] .join（''）; 
} 
 
 infowindow.setContent（'< div>< strong>'+ place.name +'< / strong>< br>'+ address）; 
 infowindow.open（map，marker）; 
}）; 
 
 //设置单选按钮上的侦听器来更改Places 
 // Autocomplete中的过滤器类型。 
函数setupClickListener（id，types）{
 var radioButton = document.getElementById（id）; 
 radioButton.addEventListener（'click'，function（）{
 autocomplete.setTypes（types）; 
}）; 
} 
 
 setupClickListener（'changetype-all'，[]）; 
 setupClickListener（'changetype-address'，['address']）; 
 setupClickListener（'changetype-establishment'，['establishment']）; 
 setupClickListener（'changetype-geocode'，['geocode']）; 
} 
< / script> 
< script src =https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap
 async defer>< / script> 
  

解决方案

Google 最近更改了 其Google Maps API的使用条款;如果您已在2016年6月22日之前的网站（与本地主机不同）使用它们，则不会有任何变化;否则，您将得到上述问题并需要一个API密钥才能解决您的错误。免费的API密钥是有效的每天最多25,000次地图加载。

在本文中，您可以找到关于主题，包括修复错误的教程：

另外，请记住用您的实际API密钥替换YOUR_API_KEY！

I am using this code from Google Map API's and it is not working

<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  .controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  #pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
  }

  #pac-input:focus {
    border-color: #4d90fe;
  }

  .pac-container {
    font-family: Roboto;
  }

  #type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
  }

  #type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="type-selector" class="controls">
  <input type="radio" name="type" id="changetype-all" checked="checked">
  <label for="changetype-all">All</label>

  <input type="radio" name="type" id="changetype-establishment">
  <label for="changetype-establishment">Establishments</label>

  <input type="radio" name="type" id="changetype-address">
  <label for="changetype-address">Addresses</label>

  <input type="radio" name="type" id="changetype-geocode">
  <label for="changetype-geocode">Geocodes</label>
 </div>
<div id="map"></div>

<script>
  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:                         // <script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&libraries=places">

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    var input = /** @type {!HTMLInputElement} */(
        document.getElementById('pac-input'));

    var types = document.getElementById('type-selector');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });

    autocomplete.addListener('place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }

      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }
      marker.setIcon(/** @type {google.maps.Icon} */({
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(35, 35)
      }));
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);

      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
      infowindow.open(map, marker);
    });

    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, types) {
      var radioButton = document.getElementById(id);
      radioButton.addEventListener('click', function() {
        autocomplete.setTypes(types);
      });
    }

    setupClickListener('changetype-all', []);
    setupClickListener('changetype-address', ['address']);
    setupClickListener('changetype-establishment', ['establishment']);
    setupClickListener('changetype-geocode', ['geocode']);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
    async defer></script>

解决方案

Google recently changed the terms of use of its Google Maps APIs; if you were already using them on a website (different from localhost) prior to June 22nd, 2016, nothing will change for you; otherwise, you will get the aforementioned issue and need an API key in order to fix your error. The free API key is valid up to 25,000 map loads per day.

In this article you will find everything you may need to know regarding the topic, including a tutorial to fix your error:

Google Maps API error: MissingKeyMapError [SOLVED]

Also, remember to replace YOUR_API_KEY with your actual API key!

这篇关于此页面未正确加载Google地图。查看JavaScript控制台了解技术细节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！