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

Question

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

Kir*_*adi 1 google-maps google-maps-api-3

我不确定这是什么原因.我复制了示例代码并尝试在localhost上运行Dreamweaver.But由于某些原因我看不到地图被加载.我记得早些时候曾经加载它但是现在它没有加载.我有有效的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>

Run Code Online (Sandbox Code Playgroud)

这是最简单的代码,但我仍然无法得到它.

enter code here

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

geo*_*zip 10

您需要为地图设置尺寸,这对我有用:

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

Run Code Online (Sandbox Code Playgroud)

或者这个CSS:

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

Run Code Online (Sandbox Code Playgroud)

工作实例

代码段:

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);

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，6 月前
查看次数：	6417 次
最近记录：	10 年，9 月前