Using DOCTYPE makes my map invisible
434 views
Skip to first unread message
Mark
Aug 5, 2009, 2:06:15 PM8/5/09
to Google Maps JavaScript API v3
Hi
First ever post - be gentle!
Embedding a map into a web page. Works great - http://www.3esmultimedia.com/gm/map.html.
The code is:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(36.356334,-5.238075);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500; height:400"></div>
</body>
</html>
However, the site I'm working on requires:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
at the top of the html page else it throws out all the spacing.
This seems to make my map invisible - http://www.3esmultimedia.com/gm/map2.html.
The rest of the code on map2 page is identical to map page.
Any ideas how to get round this? Any comments will be greatly
received.
Mark
First ever post - be gentle!
Embedding a map into a web page. Works great - http://www.3esmultimedia.com/gm/map.html.
The code is:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(36.356334,-5.238075);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500; height:400"></div>
</body>
</html>
However, the site I'm working on requires:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
at the top of the html page else it throws out all the spacing.
This seems to make my map invisible - http://www.3esmultimedia.com/gm/map2.html.
The rest of the code on map2 page is identical to map page.
Any ideas how to get round this? Any comments will be greatly
received.
Mark
Esa
Aug 5, 2009, 4:53:26 PM8/5/09
to Google Maps JavaScript API v3
Mark
Aug 6, 2009, 2:50:45 AM8/6/09
to Google Maps JavaScript API v3
Hi Esa
Thanks for that...not sure how that got in there! My mistake...I've
taken the second <html> tag out, but still an invisible map.
It definitely runs the initialize function as I tried it with an alert
message - it just doesn't seem to place the map.
Regards, Mark
Thanks for that...not sure how that got in there! My mistake...I've
taken the second <html> tag out, but still an invisible map.
It definitely runs the initialize function as I tried it with an alert
message - it just doesn't seem to place the map.
Regards, Mark
Esa
Aug 6, 2009, 5:21:37 AM8/6/09
to Google Maps JavaScript API v3
Also try to put units in style
<div id="map_canvas" style="width:500; height:400">
<div id="map_canvas" style="width:500px; height:400px">
XHTML doctype makes the browser more strict in syntax rules.
Mark
Aug 6, 2009, 6:17:54 AM8/6/09
to Google Maps JavaScript API v3
Thank you so much Esa - adding in the px works a treat - and such a
simple fix.
You have saved me hours of plodding through best practices in using
doctypes articles and validation sites!
Thanks again, Mark
simple fix.
You have saved me hours of plodding through best practices in using
doctypes articles and validation sites!
Thanks again, Mark
Adam Przybyłek
Aug 17, 2009, 12:37:10 PM8/17/09
to Google Maps JavaScript API v3
On 6 Sie, 11:21, Esa <esa.ilm...@gmail.com> wrote:
> Also try to put units in style
>
> <div id="map_canvas" style="width:500; height:400">
>
> to
>
> <div id="map_canvas" style="width:500px; height:400px">
>
> XHTMLdoctypemakes the browser more strict in syntax rules.
> Also try to put units in style
>
> <div id="map_canvas" style="width:500; height:400">
>
> to
>
> <div id="map_canvas" style="width:500px; height:400px">
>
However, in case you specify width and height as percentage, e.g.:
<div id="map_canvas" style="width: 100%; height: 100%">
it doesn't work with DOCTYPE.
NotionCommotion
Aug 27, 2009, 2:58:00 PM8/27/09
to Google Maps JavaScript API v3
Has there been any update on how to specify width and height as
percentages?
The V3 tutorial at http://code.google.com/apis/maps/documentation/v3/introduction.html
shows them as percentages, however, adding a DOCTYPE prevents it from
working.
Thanks
percentages?
The V3 tutorial at http://code.google.com/apis/maps/documentation/v3/introduction.html
shows them as percentages, however, adding a DOCTYPE prevents it from
working.
Thanks
Esa
Aug 27, 2009, 4:57:35 PM8/27/09
to Google Maps JavaScript API v3
It has nothing to do with Google Maps API. If you set height of a
container say 80%, it means 80% of parent element height. With strict
doctype, you have to set the height of parent element (body) and its
parent element (html). Their default heights are undefined in strict
mode.
It is a good practice to put the first line of your <style> section:
html, body {height: 100%}
A simple fix.
container say 80%, it means 80% of parent element height. With strict
doctype, you have to set the height of parent element (body) and its
parent element (html). Their default heights are undefined in strict
mode.
It is a good practice to put the first line of your <style> section:
html, body {height: 100%}
A simple fix.
NotionCommotion
Aug 27, 2009, 9:53:14 PM8/27/09
to Google Maps JavaScript API v3
Esa, You are awsome!
Reply all
Reply to author
Forward
0 new messages