1

この理由はわかりません。サンプルコードをコピーして、ローカルホストの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

Key Value Request 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に渡す必要があります。

4

1 に答える 1

10

マップのサイズを設定する必要があります。これは私にとってはうまくいきます。

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

またはこのCSS：

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

実例

コードスニペット：

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>

于 2013-02-18T22:48:33.663 に答える