Javascript 谷歌地图现在不显示
直到昨天，我的网站运行得非常愉快，我不知道为什么 我没有改变任何编码，这是相当恼人 我知道这个月GMAP2API已经停止使用了，但据我所知，我的代码是API3 有什么想法吗Javascript 谷歌地图现在不显示,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,直到昨天，我的网站运行得非常愉快，我不知道为什么 我没有改变任何编码，这是相当恼人 我知道这个月GMAP2API已经停止使用了，但据我所知，我的代码是API3 有什么想法吗 <!DOCTYPE html> <html> <Head> <title>Fishtrends | Tightlines</title> <meta name="viewport" content="width=dev
<!DOCTYPE html>
<html>
<Head>
<title>Fishtrends | Tightlines</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0>
<link href = "css/css/bootstrap.css" rel = "Stylesheet">
<link href = "css/css/bootstrap.min.css" rel = "stylesheet" type='text/css'>
<link href = "css/css/style.css" rel = "stylesheet">
<link href = "css/fonts/fonta/css/font-awesome.min.css" rel = "stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" script src="css/js/bootstrap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>
<script>
var marker;
var infowindow;
var map;
var customIcons = {
Bass: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
},
Cod: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
},
Gurnard: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_orange.png'
},
Flatty: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
},
Mackerel: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_gray.png'
},
Whiting: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_white.png'
},
Pollack: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png'
},
Wrasse: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_purple.png'
},
Pout: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_brown.png'
},
Blank: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
};
function initialize() {
var latlng = new google.maps.LatLng(54.559322, -4.174804);
var options = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), options);
var html = "<table>" +
"<h4> <b>Lets add some fish!</b></h4>" +
"<tr><td>Fish Species:</td> <td><select id='fishspecies'>" +
"<option value='Bass' SELECTED>Bass</option>" +
"<option value='Cod'>Cod</option>" +
"<option value='Gurnard'>Gurnard</option>" +
"<option value='Flatty'>Flatty</option>" +
"<option value='Mackeral'>Mackeral</option>" +
"<option value='Whiting'>Whiting</option>" +
"<option value='Pollack'>Pollack</option>" +
"<option value='Wrasse'>Wrasse</option>" +
"<option value='Pout'>Pout</option>" +
"<option value='Blank'>Blank</option>" +
"<tr><td>Catch Method:</td> <td><select id='catchmethod'>" +
"<option value='Beach' SELECTED>Beach</option>" +
"<option value='Boat'>Boat</option>" +
"<option value='Spinning'>Spinning</option>" +
"<option value='Pier'>Pier</option>" +
"<tr><td>Bait:</td> <td><select id='bait'>" +
"<option value='Lugworm' SELECTED>Lugworm</option>" +
"<option value='Mackerel'>Makerel</option>" +
"<option value='Ragworm' >Ragworm</option>" +
"<option value='Livebait'>Livebait</option>" +
"<option value='Squid'>Squid</option>" +
"<option value='Peeler'>Peeler</option>" +
"<tr><td>Size LB:</td> <td><input type='text' id='sizelb'/> </td> </tr>" +
"<tr><td>Month Caught:</td> <td><select id='date'>" +
"<option value='January' SELECTED>January</option>" +
"<option value='February'>February</option>" +
"<option value='March'>March</option>" +
"<option value='April'>April</option>" +
"<option value='May'>May</option>" +
"<option value='June'>June</option>" +
"<option value='July'>July</option>" +
"<option value='August'>August</option>" +
"<option value='September'>September</option>" +
"<option value='October'>October</option>" +
"<option value='November'>November</option>" +
"<option value='December'>December</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='submit' class='btn btn-primary btn-xs' value='Save and Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
// Change this depending on the name of your PHP file
savefishdata();
}
function savefishdata() {
var infoWindow = new google.maps.InfoWindow;
downloadUrl("phpsqldom.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var fishname = markers[i].getAttribute("fishspecies");
var fishbait = markers[i].getAttribute("bait");
var caughttime = markers[i].getAttribute("date");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + fishname + "</b> <br/>" + fishbait + caughttime;
var icon = customIcons[fishname] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function saveData() {
var fishspecies = escape(document.getElementById("fishspecies").value);
var catchmethod = escape(document.getElementById("catchmethod").value);
var bait = document.getElementById("bait").value;
var sizelb = document.getElementById("sizelb").value;
var date = document.getElementById("date").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?fishspecies=" + fishspecies + "&catchmethod=" + catchmethod + "&bait=" + bait + "&date=" + date + "&lat=" + latlng.lat() + "&lng=" + latlng.lng() + "&sizelb=" + sizelb ;
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.responseText.length <= 1) {
infowindow.close();
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body>
<div class = "navbar navbar-main navbar-static-top">
<div class= "container">
<a href = "#" class = "navbar-brand"><b>Fishtrends</b> - Social Fish trending</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href ="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><i class="glyphicon glyphicon-user"></i>
Profile<b class="caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#">My Details</a></li>
<li><a href = "/edit_account.php">Change Password</a></li>
</ul>
<li><a href ="/logout.php"><i class="glyphicon glyphicon-off"></i> Logout</a></li>
</ul>
</div>
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright Fishtrends - 2013 <i class="glyphicon glyphicon-copyright-mark"></i></p>
<a href = "http://www.twitter.com/fishtrends" class = "navbar-btn btn-primary btn pull-right"><i class="fa fa-twitter fa-1x"></i> Follow Us</a>
<p class = "navbar-text pull-right"><a href ="#"><i class="glyphicon glyphicon-question-sign"></i> About Us</a></p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3" style=padding-right:0px >
<a class="twitter-timeline" href="https://twitter.com/fishtrends" data-widget-id="400362818177748992">Tweets by @fishtrends</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<h4><b>Fish types</b></h4>
<ul class="fishlist-group">
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_blue.png"> Bass</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_red.png"> Cod</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_orange.png"> Gurnard</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_green.png"> Flatfish</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_gray.png"> Mackerel</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_white.png"> Whiting</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_black.png"> Pollack</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_purple.png"> Wrasse</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_brown.png"> Pout</li>
<li class="fishlist-group-item">
<img src="http://labs.google.com/ridefinder/images/mm_20_shadow.png"> Blank!</li>
</ul>
</div>
<div class="col-xs-9">
<div id="map-canvas">
</div>
</div>
</div>
</body>
鱼类趋势|收紧线
请参考链接
为div id“map canvas”设置“width”和“height”，地图就会出现
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
#地图画布{
宽度：500px；
高度：400px；
}
您试图修复的是什么？关于您的站点发生了什么事，有什么线索吗？customIcons结构中最后一项末尾的尾随逗号将导致IE:Blank:{icon:'http://labs.google.com/ridefinder/images/mm_20_shadow.png“}，
我真是个甜甜圈……我编辑了我的production Style.css，错误地认为它是登台的。
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>