谷歌地图API v3没有出现

Google Map API v3 is not appearing

本文关键字：API v3 谷歌地图      更新时间：2023-09-26

我无法让我的谷歌地图出现在任何浏览器中。我甚至试着从谷歌的例子中复制下面的大部分示例代码，并以此为基础构建，但我甚至不能让它出现。你知道下面可能有什么问题吗?注意:我实际上把我的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>

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

这个API V3不需要key:)

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

你的地图没有大小，所以你看不到它

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

你也不包括API脚本(我得到一个错误"谷歌没有定义"在javascript控制台)，这对我本地工作:

<!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>
工作示例

相关文章：