Google Maps API v3：灰色框，无地图 [英] Google Maps API v3: Gray Box, no map
问题描述
使用Firebug，我可以看到试图填充地图的信息，但它是根本不显示。我试过jquery，专门为google地图制作的jquery库，没有任何工作。我一直在互联网上，并通过谷歌的API帮助文件。此外，问题并非本地化，因为我已将文件上传到多台服务器，并在多台浏览器和计算机上进行了测试。没有任何工作。
在这一点上，我忽略了一些愚蠢的东西。这是我的代码。
<！DOCTYPE html>
< html>
< head>
< title>< / title>
< META NAME =ROBOTSCONTENT =NOINDEX，NOFOLLOW>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?&sensor=true>
< / script>
< script type =text / javascript>
函数load（）
{
var mapDiv = document.getElementById（map）;
var latlng = new google.maps.LatLng（-34.397,150.644）;
var mapOptions =
{
// zoom：8，
center：latlng，
// backgroundColor：'＃ff0000'，
mapTypeId：google .maps.MapTypeId.ROADMAP，
imageDefaultUI：true
};
var map = new google.maps.Map（mapDiv，mapOptions）;
函数createMarker（point，text，title）
{
var marker =
new GMarker（point，{title：title}）;
返回标记;
}
}
< / script>
< / head>
< body onload =load（）>
< div id =mapstyle =width：800px; height：400px;>< / div>
< / div>
< / body>
< / html>
这适用于我。您只需必须设置缩放参数：
<！DOCTYPE html>
< html>
< head>
< title>< / title>
< META NAME =ROBOTSCONTENT =NOINDEX，NOFOLLOW>
< script src =http://maps.google.com/maps/api/js?sensor=falsetype =text / javascript>< / script>
< / script>
< script type =text / javascript>
函数load（）
{
var mapDiv = document.getElementById（map）;
var latlng = new google.maps.LatLng（-34.397,150.644）;
var mapOptions =
{
zoom：8，
center：latlng，
// backgroundColor：'＃ff0000'，
mapTypeId：google.maps .MapTypeId.ROADMAP，
// imageDefaultUI：true
};
var map = new google.maps.Map（mapDiv，mapOptions）;
// map.addControl（new GSmallMapControl（））;
// map.addControl（new GMapTypeControl（））;
// map.addMapType（ROADMAP）;
// map.setCenter（
// new GLatLng（37.4419，-122.1419），13）;
}
< / script>
< / head>
< body onload =load（）>
< div id =mapstyle =width：800px; height：400px;>& nbsp;< / div>
< / body>
< / html>
As part of a much bigger project, we're trying to get a Map on a site using Google's Map API v3. I have followed the simplest steps that Google has laid out, I've tried copying code outright from other working maps. But no matter what I do, all we get is a gray box and no map.
Using Firebug, I can see the information trying to populate the map, but it is simply not displaying. I've tried jquery, jquery libraries specifically made for google maps, nothing is working. I have been up and down the internet and all through google's api help files. Plus, the problem is not local as I've uploaded the file to multiple servers and tested it on multiple browsers and computers. Nothing is working.
At this point it's got to be something stupid that I'm overlooking. Here's my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=true">
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
//zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
function createMarker(point, text, title)
{
var marker =
new GMarker(point,{title:title});
return marker;
}
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>
This works for me. You simply have to set zoom parameter:
<!DOCTYPE html>
<html>
<head>
<title></title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</script>
<script type="text/javascript">
function load()
{
var mapDiv = document.getElementById("map");
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions =
{
zoom: 8,
center:latlng,
//backgroundColor: '#ff0000',
mapTypeId: google.maps.MapTypeId.ROADMAP,
//imageDefaultUI: true
};
var map = new google.maps.Map(mapDiv, mapOptions);
// map.addControl(new GSmallMapControl());
// map.addControl(new GMapTypeControl());
// map.addMapType(ROADMAP);
// map.setCenter(
// new GLatLng(37.4419, -122.1419), 13);
}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 800px; height: 400px;"> </div>
</body>
</html>
这篇关于Google Maps API v3：灰色框，无地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
