[英]Can't load Javascript
I am trying to load this google map-canvas and it just won't work. 我正在尝试加载此google map-canvas,但无法正常工作。 The google example works which suggests this is a code error.
谷歌示例工作,这表明这是一个代码错误。
Can anyone see anything wrong in this code? 任何人都看不到这段代码有什么问题吗?
I'm adding it into a DIV with DIV ID of map-canvas 我将其添加到具有地图画布DIV ID的DIV中
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(54.559322, -4.174804);
var options = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var html = "<table>" +
"<tr><td>Username:</td> <td><input type='text' id='userid'/> </td> </tr>" +
"<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='Garfish'>Garfish</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='month'>" +
"<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='button' value='Save & 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);
});
});
}
function saveData() {
var userid = document.getElementById("userid").value;
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 month = document.getElementById("month").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?fishspecies=" + fishspecies + "&catchmethod=" + catchmethod + "&bait=" + bait + "&month=" + month + "&lat=" + latlng.lat() + "&lng=" + latlng.lng() + "&sizelb=" + sizelb + "&userid=" + userid;
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Fish added"
}
});
}
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing()
google.maps.event.addDomListener(window, "load", initialize);
Your css is wrong. 您的CSS错误。 The map doesn't have a size:
地图没有尺寸:
.map-canvas {
width: 400px;
height: 400px;
}
should be: 应该:
#map-canvas {
width: 400px;
height: 400px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.