Google Maps 示例代码未在 localhost 中运行答案

【问题标题】：Google Maps sample code not running in localhostGoogle Maps 示例代码未在 localhost 中运行
【发布时间】：2013-02-18 22:41:07
【问题描述】：

我不确定这是什么原因。我复制了示例代码并尝试在本地主机上的 Dreamweaver 中运行它。但由于某些原因，我没有看到地图正在加载。我记得之前它曾经加载它但现在它没有加载。我有有效的 api 密钥，我的网站仍然不公开。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
     <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      }

      function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
  </head>
  <body onload="initialize()">
  <!--  <div>
      <input id="address" type="textbox" value="myaddress">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>-->
    <div id="map_canvas" style="height:90%;top:30px"></div>
  </body>
</html>

这是最简单的代码，但我还是搞不定。

enter code here

键值请求 GET /maps/api/js/QuotaService.RecordEvent?1shttp%3A%2F%2Flocalhost%2Fgeoc.html&4e1&5e0&6u1&7sc7c7sc&callback=xdc._papnzo&token=120226 HTTP/1.1

有人可以看看并建议我如何解决这个问题吗？我必须对地址进行地理编码，然后将其传递给 places api。

【问题讨论】：

您的问题到底是什么？地图不显示？您发布的“键值请求”是什么？
键值详细信息来自浏览器的f12工具，想检查是否有与配额阻塞我的通话有关的内容。我认为不是这样。

标签： google-maps google-maps-api-3

【解决方案1】：

你需要为你的地图设置一个大小，这对我有用：

<div id="map_canvas" style="height:500px;width:600px;"></div>

或者这个 CSS：

body, html, #map_canvas {
  height: 100%;
  width: 100%;
}

working example

代码 sn-p：

var geocoder;
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

body,
html,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
  <input id="address" type="textbox" value="126 Beacon Avenue Jersey City NJ 07306 USA">
  <input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas"></div>

【讨论】：

是的 geocodezip，我没有正确设置大小。澄清一下，地图不采用百分比值还是我们需要以像素为单位给出明确的值？
您可以使用百分比大小。但是您需要确保定义了父元素的大小，否则它不起作用...Using a percentage height for the map div
感谢 Geocodezip。我也会检查链接。现在完美运行。