我的谷歌地图(带有JS的静态HTML)不会突然出现?

时间:2013-11-20 04:57:18

标签: javascript jquery html css google-maps

直到昨天,我的PC应用程序生成的HTML地图文件才会显示出来。 但突然今天早上,地图不会显示?我真的不知道 原来它起作用了,突然它现在不起作用了? 是否有任何API更新导致此问题?

有人可以帮我看看我的html文件如下吗? 您可以尝试将以下HTML代码复制并粘贴到文件中并另存为html文件, 然后单击打开HTML文件,地图就不会显示?

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script
src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=ja"type="text/javascript"></script>
<script type="text/javascript">
var stzoom=13;
var map;
function init(){
if (GBrowserIsCompatible()){
map=new GMap2(document.getElementById("map_canvas"));
var mapui = map.getDefaultUI();
mapui.maptypes.physical = false;
map.setUI(mapui);
map.setCenter(new GLatLng(0,0),0);
bounds = new GLatLngBounds();
var polyOptions = {geodesic:true};
function addIcon(icon) { 
icon.iconSize = new GSize(48, 48);
icon.shadowSize = new GSize(48, 48);
icon.iconAnchor = new GPoint(24, 45);
icon.infoWindowAnchor = new GPoint(24, 24); }
var newIcon = new GIcon();
newIcon.image = "C:/Program Files/TransTechnology/Enjoy ARES/Image/goal.png";
addIcon(newIcon);
var newIcon1 = new GIcon();
newIcon1.image = "C:/Program Files/TransTechnology/Enjoy ARES/Image/start.png";
addIcon(newIcon1);
var newIcon2 = new GIcon();
newIcon2.image = "start.png";
addIcon(newIcon2);
var point0=new GLatLng(37.85383,138.9178);
var marker0=new GMarker(point0,{icon: newIcon1});
map.addOverlay(marker0);
var point1=new GLatLng(37.85387,138.9179);
var marker1=new GMarker(point1,{icon: newIcon});
map.addOverlay(marker1);
var polyline0= new GPolyline([new GLatLng(37.85383,138.9178),
new GLatLng(37.85374,138.9176),
new GLatLng(37.85365,138.9175),
new GLatLng(37.85355,138.9173),
new GLatLng(37.85347,138.9171),
new GLatLng(37.85336,138.9169),
new GLatLng(37.85326,138.9167),
new GLatLng(37.85317,138.9165),
new GLatLng(37.85305,138.9163),
new GLatLng(37.85297,138.9161),
new GLatLng(37.8529,138.9159),
new GLatLng(37.85279,138.9157),
new GLatLng(37.85269,138.9155),
new GLatLng(37.85267,138.9157),
new GLatLng(37.85264,138.9159),
new GLatLng(37.85255,138.916),
new GLatLng(37.85291,138.9158),
new GLatLng(37.85302,138.916),
new GLatLng(37.85313,138.9162),
new GLatLng(37.85321,138.9164),
new GLatLng(37.85334,138.9167),
new GLatLng(37.85344,138.9169),
new GLatLng(37.85355,138.9172),
new GLatLng(37.8537,138.9174),
new GLatLng(37.85381,138.9177),
new GLatLng(37.85389,138.9179),
new GLatLng(37.85404,138.9181),
new GLatLng(37.854,138.9181),
new GLatLng(37.85387,138.9179)],"#ff0000", 5, 0.7, polyOptions);
map.addOverlay(polyline0);
bounds.extend(new GLatLng(37.84937, 138.9032));
bounds.extend(new GLatLng(37.87642, 138.9412));
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
}
}
window.onload=init;
</script>
</head>
<body scroll=no>
<div id="map_canvas" style="width: 1024px; height: 706px; position: absolute; left: 0; top: 0">
<font size="5" color="#cc0000">
<div align="center">
<p><marquee></marquee></p>
<p><marquee></marquee></p>
<p><marquee></marquee></p>
<p><marquee></marquee></p>
<p><marquee></marquee></p>
<p><marquee>
We are sorry that the map cannot be shown...... 
</marquee></p>
</font></div>
</body>
</html>

4 个答案:

答案 0 :(得分:2)

您正在使用Google Maps Javascript API v2:

<script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=ja"type="text/javascript"></script>

Google Maps Javascript API v2已被拒绝。它已被原始弃用期结束时过去6个月广告的Google Maps Javascript API v3的换行版本所取代。

来自the documentation

  

警告:Google Maps JavaScript API的第2版不再适用于新版本   应用程序将在 2013年11月19日中针对现有应用程序进行调低。请   按照指南将您的代码迁移到Google Maps JavaScript API的第3版。作为    2013年11月19日,请求v2的所有应用程序都将提供特殊的包装版本   而是改为v3 API。我们希望API的这个包装版本最简单   地图,但我们强烈建议您立即迁移到v3 API

答案 1 :(得分:2)

您正在使用不再使用的Google地图v2。所以你必须upgrade to Google maps V3

以下是关于如何使用Google地图版本3的简单example

答案 2 :(得分:1)

您使用的是Google地图api v2,已弃用,现在已迁移到Goolge地图api v3并尝试在Google地图api v3中实施该代码,然后您就可以使用Google地图了

如何实施Google地图api v3将在以下链接中显示

Google map api v3

答案 3 :(得分:0)

在Chrome中安装此扩展程序可以使您的网站正常运行https://chrome.google.com/webstore/detail/fix-google-maps-v2/kkpeicijnijpaaccefbpgifghpnnfaol

相关问题