Google Map API v3 未出现 [重复]答案

【问题标题】：Google Map API v3 is not appearing [duplicate]Google Map API v3 未出现 [重复]
【发布时间】：2013-06-04 18:02:35
【问题描述】：

我的 Google 地图无法在任何浏览器中显示。我什至尝试从 Google 的示例中复制下面的示例代码并以此为基础，但我什至无法让它出现。任何想法下面可能有什么问题？注意：我实际上确实将我的 API 密钥放在了“我将我的密钥放在此处”的位置。 :)

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=I PUT MY KEY IN HERE&sensor=false"></script>
<script type="text/javascript">
    function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { height: 100%} 
</style>
</head>
<body>
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>     
</body>
</html>

【问题讨论】：

标签： javascript api google-maps

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">

    function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#map-canvas { width  : 100%;
        height : 300px;
        border: solid thin #333;
       margin-top: 20px;} 
</style>
</head>
<body>
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>     
</body>
</html>

【讨论】：

我得到一个横跨整个页面的空矩形。不过没有地图。
上面的 html 正在工作，它在帕洛阿尔托附近显示一个标记。
我知道这可能与我的 API 密钥有关。就是这样。谢谢。

【解决方案2】：

在此 API 的 V3 中您不需要密钥 :)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 500px;
width: 500px;
}
</style>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);

var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Place!'
});
}    
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>

【讨论】：

我知道这可能与我的 API 密钥有关。就是这样。谢谢。

【解决方案3】：

你的地图没有尺寸，所以你看不到

<div id="map-canvas" style="height:500px; width:600px"></div>

您也没有包括 API 脚本（我在 javascript 控制台中收到错误“google is not defined”），这在本地适用于我：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
html,body,#bb_map { height: 100%; width:100%;} 
#map-canvas { height: 100%; width:100%;} 
</style>
</head>
<body>
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>     
</body>
</html>

working example

【讨论】：

我知道这可能与我的 API 密钥有关。就是这样。谢谢。
虽然您需要 v3 API 的密钥，但您可以使用一个，如果您想通过 API 控制台跟踪使用情况，则需要一个。因此，如果您的密钥有效，那将不是问题。