谷歌地圖示例代碼不在本地主機上運行

我不知道是什麼原因this.I複製示例代碼，並試圖在本地主機上的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 &回調= XDC ._papnzo & token = 120226 HTTP/1.1

有人可以看看，並建議我如何得到這個？我必須對地址進行地址解碼，然後將其傳遞到api位置。

來源

2013-02-18 Kiran Badi

究竟是什麼問題？地圖沒有顯示？什麼是您發佈的「關鍵價值請求」？ – geocodezip 2013-02-18 22:44:33

關鍵的價值細節來自f12工具的瀏覽器，想檢查是否有與配額有關的任何東西阻止我的電話。我認爲情況並非如此。 – 2013-02-18 22:55:43

您需要設置一個大小爲您的地圖，這對我的作品：

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

或這個CSS：

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

working example

代碼片段：

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-18 22:48:33 geocodezip

Yup geocodezip，我沒有正確設置大小。一個澄清，地圖不採取百分比值或我們需要以像素給出明確值？ – 2013-02-18 22:53:51

您可以使用百分比大小。但是你需要確定父元素的大小已經被定義或者它不起作用... [使用地圖div的百分比高度]（http://econym.org.uk/gmap/basic19.htm） – geocodezip 2013-02-18 22:58:24

感謝Geocodezip。我會檢查鏈接also.Works現在完美。 – 2013-02-18 23:05:12

谷歌地圖示例代碼不在本地主機上運行

回答

相關問題