Fixed
Status Update
No update yet.
Comments
fr...@gmail.com
Sorry, one more point. The reason why I am using the async API loader is because the Maps API apparently will not function at all with static loading of the API. A forum poster suggested using aync loading, which at least resulted in the maps being painted, but regrettably the controls in the upper left are presented double vision.
lu...@google.com
Are you able to include a link rather than pasting code?w
fr...@gmail.com
At www.discoverydata.net84.net , I've uploaded async.htm which is Google's sample source for async loader with a small change to fully qualify the CSS reference. You can click that and see proper operation. I've also uploaded async.xhtml, which is async.htm modified to comply with XHTML syntax. That unfortunately is completely inoperable from www.discoverydata.net84.net , apparently because 000webhost.com is interfering with XHTML operation. I've also tried uploading the two files to frankjnatoli.embarqspace.com but that webhost is also interfering with XHTML operation. Would it be possible for you to use the attached files to demonstrate the problem?
cb...@google.com
Thanks for the report.
cb...@google.com
sh...@gmail.com
SPLA
Description
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps JavaScript API v3 Example: Asynchronous Map Simple
</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="
rel="stylesheet" type="text/css">
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
And here is the above, tweaked as minimally as possible to conform to XHTML. The map itself paints very nicely, but the controls at the upper left are duplicated, two sets of images, separated vertically by approximately 50 pixels. Same effect under both IE 9.0 and Safari 5.1.2:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
<html xmlns="
<head>
<title>
Google Maps JavaScript API v3 Example: Asynchronous Map Simple
</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<link href="
rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
What is causing the duplication of the controls at the upper left of the screen?
My interest in XHTML is not academic. I am attempting to submit a product to the Apple iBookstore, which requires EPUB compliance, which requiress XHTML compliance. My product utilizes Google Maps, which operate perfectly under HTML but fail under XHTML. A forum suggestion to use the asynchronous loader for XHTML operation was helpful, but resulted in the double vision of the controls. Thanks.