Her*_*erb 8 html javascript firefox google-maps
我有一个XML,它通过XSLT转换为HTML.XML能够包含JavaScript,并且它可以正确地将其转换为HTML,就像我在许多其他页面中一样.它只是不适用于GoogleMaps,我怀疑,我的JavaScript在某处出错了.
生成的HTML的相关部分看起来如下所示.
HTML /脚本中发生了什么:
<body
onload="start();">.google.maps.对我来说,这看起来像以下是错误的某个地方.
var map_options = {
center: new google.maps.LatLng(44.54, -78.54),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
但几个小时后,我仍然无法弄清楚它是什么.
<html>
<head>
...
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
</script>
<script type="text/javascript">
function start()
{
var map_canvas = document.getElementById('map_canvas');
// If the element can be located, we make it green. Checked.
// If we give the function another name than start, it won't be executed. Checked.
map_canvas.style.backgroundColor = 'green';
if(typeof google.maps != 'undefined') {
// If the google.maps object exists, we make the canvas red. Checked.
// If the API was not loaded from googleapis (commented out), it will stay green.
map_canvas.style.backgroundColor = 'red';
}
// So why does the following not work?
var map_options = {
center: new google.maps.LatLng(44.54, -78.54),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Not arriving here:
map_canvas.style.backgroundColor = 'blue';
// Before going on, I want to solve above problem, so this is commented out.
// var map = new google.maps.Map(map_canvas, map_options);
// map_canvas.style.backgroundColor = 'black';
}
</script>
</head>
<body onload="start();">
...
<div style="width: 400px; height: 224px;" id="map_canvas"></div>
...
</body>
</html>
我找到了这个谷歌页面。（编辑：根据 2017 年 6 月 16 日，链接已损坏。）不过，它似乎没有记录。单击按钮。适用于 FF 和 IE。检查标记和 Javascript，它通过回调加载地图。
谢谢你让我走上正轨。
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Dynamic Loading</title>
<script type="text/javascript">
function handleApiReady() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function appendBootstrap() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
document.body.appendChild(script);
}
</script>
</head>
<body style="margin:0px; padding:0px;">
<input type="button" value="Load Bootstrap + API" onclick="appendBootstrap()">
<div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>