XHTML versus HTML

Frank Natoli

unread,

Jan 20, 2012, 1:53:22 PM1/20/12

to google-map...@googlegroups.com

Attempting to convert Google Maps HTM code to XHTML. Find that JavaScript stops executing at the following statement:

var myLatlng = new google.maps.LatLng(50.391652,5.932534);

Placed an "alert" before and after the JavaScript statement. See first alert; dont' see second alert. Comment-out the above statement, then do see second alert. What could be objectionable about the above statement to XHTML?

davie

unread,

Jan 20, 2012, 4:50:46 PM1/20/12

to Google Maps JavaScript API v3

Hi
How about
var myLatlng = new google.maps.Latlng(50.391652,5.932534);
instead of

var myLatlng = new google.maps.LatLng(50.391652,5.932534);

Regards Davie

Frank Natoli

unread,

Jan 21, 2012, 11:04:52 AM1/21/12

to google-map...@googlegroups.com

Sorry, that didn't help. Also note that Google's own sample code uses "LatLng" not "Latlng", see:

http://code.google.com/apis/maps/articles/tutorial-iphone.html

Also inserted "xmlns:v="urn:schemas-microsoft-com:vml"

into <html> declaration but that didn't help either.

There are a lot of comments on the web suggesting that Google Maps are not compatible with XHTML because they make use of "document.write" which is said to not be incorporated into the XHTML5 DOM standard. I don't know if this is true, but I do know that I can't get Google Maps to function in an XHTML5 environment and there is a prominent manufacturer who demands such compliance.

Jeff Lake

unread,

Jan 21, 2012, 5:04:16 PM1/21/12

to google-map...@googlegroups.com

the invalid XHTML is the use of the ampersand & when building URL's
if you use & in java script, it makes valid XTML but breaks the
java script

-Jeff Lake
MichiganWxSystem.com
WeatherMichigan.net
TheWeatherCenter.net
GRLevelXStuff.com

> --
> You received this message because you are subscribed to the Google
> Groups "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-maps-js-api-v3/-/vEr4aSJ0-r4J.
> To post to this group, send email to
> google-map...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-maps-js-a...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Andrew Leach

unread,

Jan 21, 2012, 5:24:21 PM1/21/12

to google-map...@googlegroups.com

On 21 January 2012 16:04, Frank Natoli <frankj...@gmail.com> wrote:
>
> There are a lot of comments on the web suggesting that Google Maps are not
> compatible with XHTML because they make use of "document.write" which is
> said to not be incorporated into the XHTML5 DOM standard. I don't know if
> this is true, but I do know that I can't get Google Maps to function in an
> XHTML5 environment and there is a prominent manufacturer who demands such
> compliance.

The standard script tag doesn't work, because of "document.write". You
need the asynchronous loader.
http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API

For why your particular code isn't working, you really should post a
link, not a code snippet.

Frank Natoli

unread,

Jan 22, 2012, 7:25:04 PM1/22/12

to google-map...@googlegroups.com, andrew....@gmail.com

Here's the new code, with the real API key in place of "mykey" below. Is the "&" that follows not valid? I still hit checkpoint 1 but not checkpoint 2. Sorry, don't know how to provide a link, don't have a website. Thanks.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Stavelot, Tiger 222</title>
<link href="default.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
// South side of Ambleve Bridge, Stavelot
alert("checkpoint1");

var myLatlng = new google.maps.LatLng(50.391652,5.932534);

alert("checkpoint2");

Rossko

unread,

Jan 22, 2012, 8:47:31 PM1/22/12

to Google Maps JavaScript API v3

> I still hit checkpoint 1 but not
> checkpoint 2.

Action Andrew's suggestion. It just won't work unless you use the
asynchronous load method.

> Sorry, don't know how to provide a link, don't have a
> website.

But you have one planned of course, in order to meet the Terms of Use?
Most of the excuses are covered here
http://www.geocodezip.com/suggested-posting-guidelines.html

Frank Natoli

unread,

Jan 22, 2012, 9:20:33 PM1/22/12

to google-map...@googlegroups.com

Andrew provided a link to http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API The code at that link is exactly the code I am now using, with the API key. If you see something different in the code I posted from the link above, could you please point it out?

The code I am writing is intended for an Apple iPad app, not a server. Google provides an entire page dedicated to iPhone/iPad apps at http://code.google.com/apis/maps/articles/tutorial-iphone.html so I think it unlikely that my use is a violation of Google's own sample code and sample iPhone application.

Let me point out again that this code, even without the API key, works just fine under straight HTM but fails under XHTML.

Thanks for your help.

Michael Geary

unread,

Jan 23, 2012, 12:59:22 AM1/23/12

to google-map...@googlegroups.com

Andrew also said "The standard script tag doesn't work, because of 'document.write'. You need the asynchronous loader."

Follow his link again and scroll down just a bit to "Asynchronously Loading the API".

-Mike

--

You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/-wL5upvJL24J.

Michael Geary

unread,

Jan 23, 2012, 1:03:11 AM1/23/12

to google-map...@googlegroups.com

Also, is it a requirement for your app that you use XHTML? If it isn't a requirement, why bother? From looking at the iPhone example, it seems that it doesn't require XHTML.

Word on the street is that XHTML is dead and nearly buried. HTML5 has moved away from that model completely.

-Mike

Jeff Lake

unread,

Jan 23, 2012, 1:20:17 AM1/23/12

to google-map...@googlegroups.com

please bury this XHTML ..
it is not dead,
yes there are certain items that REQUIRE valid XHTML
the problem is not the document.write .. I use document.write and it passes..
the problem is the way java script formats the URL's ..
Frank came to me for help after the 'Holier the Tho' attitudes here

-Jeff Lake
MichiganWxSystem.com
WeatherMichigan.net
TheWeatherCenter.net
GRLevelXStuff.com

Rossko

unread,

Jan 23, 2012, 10:24:35 AM1/23/12

to Google Maps JavaScript API v3

"Holier than thou" ;)

It would be really helpful for others to show some XHTML demonstrator
loading the Maps API synchronously.

Frank Natoli

unread,

Jan 23, 2012, 10:45:59 AM1/23/12

to google-map...@googlegroups.com, andrew....@gmail.com

The async load did the trick, many, many thanks. I went to the link you posted but only saw the API key paragraph. Geary's suggestion to scroll down to the async load paragraph and incorporating that into my code solved the problem.

Frank Natoli

unread,

Jan 23, 2012, 2:21:55 PM1/23/12

to google-map...@googlegroups.com, andrew....@gmail.com

Perhaps I spoke a little too soon. Yes, async loading of the Maps API allows the calls from XHTML to the Maps API to function properly. And the map itself, and marker, and infoWindow that I generate work just fine. But the special controls on the upper left, the up/down/left/write/zoom-in/zoom-out, appear twice, the two sets separated vertically by maybe 50 pixels. Something is painting the controls, but only the controls, twice. Below is the code. Note it was necessary to amperand-escape various characters to please XML.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Stavelot, Tiger 222</title>
<link href="default.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">

function initialize() {
// South side of Ambleve Bridge, Stavelot

var myLatlng = new google.maps.LatLng(50.391652,5.932534);

    var myOptions = {
      zoom: 17,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var contentString = '<div id="content">'+
        '<p>LAH Tiger number 222 knocked out on south side of Stavelot bridge, 19th December 1944. GPS N50.391652° E5.932534°</p>'+
        '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'P93'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
}
function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
    document.body.appendChild(script);
}
window.onload = loadScript;
</script>

</head>
<body>
<div id="map_canvas">
</div>
</body>
</html>

Frank Natoli

unread,

Jan 23, 2012, 3:45:24 PM1/23/12

to google-map...@googlegroups.com, andrew....@gmail.com

Hoping that I do not offend anyone by pasting script rather than linking, below is Google's own sample code for asynchronous loading of the Maps API, very slightly tweaked to fully qualify default.css. This works very cleanly, with only one set of controls in the upper left of the display:

<!DOCTYPE html>
<html>
<head>
    <title>
      Google Maps JavaScript API v3 Example: Asynchronous Map Simple
    </title>

        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 = 'http://maps.googleapis.com/maps/api/js?sensor=false&' +
            '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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:v="urn:schemas-microsoft-com:vml">
<head>

    <title>
      Google Maps JavaScript API v3 Example: Asynchronous Map Simple
    </title>

        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 = 'http://maps.googleapis.com/maps/api/js?sensor=false&' +
            '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? Thanks.

Frank Natoli

unread,

Jan 24, 2012, 2:04:14 PM1/24/12

to google-map...@googlegroups.com, andrew....@gmail.com

Is there a way to submit a bug report to Google? Went up and down many pages, cannot find any "contact us" or anything that will accept feedback.

Rossko

unread,

Jan 24, 2012, 2:34:56 PM1/24/12

to Google Maps JavaScript API v3

> Is there a way to submit a bug report to Google? Went up and down many
> pages, cannot find any "contact us" or anything that will accept feedback.

It's really unlikely to be a bug in the API.
Google are unlikely to investigate any alledged bug, without you
providing a demonstration.
If you do want to go that route, you post a bug in the issues list
with your evidence.
http://code.google.com/p/gmaps-api-issues/

The most effective way way forward for your project is to post your
demonstration on some free hosting somewhere, tell us the url, and
you're likely to have folk look at it. It's unlikely anyone will
bother putting your code dump on their own hosting to investigate your
problem, and it would not in any case replicate your environment e.g.
what else are you doing in CSS?

Frank Natoli

unread,

Jan 24, 2012, 3:08:17 PM1/24/12

to google-map...@googlegroups.com

I'll take a look at the link you provided, thanks.

As I note in my recent post with two copies of the script, the first is Google demo code, from the Google website, unchanged except to fully qualify the CSS path [fully qualified to point to the Google provided CSS]. And the second is the very same Google demo code minimally tweaked to obey XHTML syntax standards, again fully qualified to point to the Google provided CSS. So, it really isn't my code, it's Google's, and it isn't my CSS, that's also Google's.

For the record, my attention to XHTML is a consequence of Apple requiring iBookstore submissions to comply with EPUB, which in turn require pages to comply with XHTML. I'm not doing this for academic purposes or to punish myself. I have no choice.

Andrew Leach

unread,

Jan 24, 2012, 6:00:49 PM1/24/12

to google-map...@googlegroups.com

On 24 January 2012 20:08, Frank Natoli <frankj...@gmail.com> wrote:
>
> For the record, my attention to XHTML is a consequence of Apple requiring
> iBookstore submissions to comply with EPUB, which in turn require pages to
> comply with XHTML. I'm not doing this for academic purposes or to punish
> myself. I have no choice.

Without a hosted example which can be run in ordinary browsers as well
as whatever Apple mandate, there's really not much to go on. It's
possible you have encountered an issue with an Apple browser. But it
needs to be verified, and if you do raise an issue Google will ask for
a link. You might as well provide one here because you will almost
certainly get a faster response.

Frank Natoli

unread,

Jan 25, 2012, 11:32:48 AM1/25/12

to google-map...@googlegroups.com, andrew....@gmail.com

My regular ISP has a free webspace, with an upload feature, but when I tried uploading the two samples, async API loader in HTM, and async API loader in XHTML, the uploader fails and then hangs. Same for both IE 9.0 and Safari 5.1.2. Put support request in with ISP.

Found 000webhost.com that offers free web hosting. Created account www.discoverydata.net84.net. Uploaded two files to public_html, async.htm and async.xhtml. You can see the HTM, but 000webhost appears to be parsing everything, I guess to protect people from rogue uploads, and it chokes on line 1 of async.xhtml, i.e., the XML declaration. Put support request in with 000webhost.

If you look at my "hoping that I do not offend" post above, but apparently I did offend, you'll see both HTM and XHTML. All that is necessary is to copy+paste each block into two separate text files on your PC, then invoke your browser of choice on them. Maybe one minute of click and clack.

I submitted a bug report to Google, but now I cannot find the bug report. I can only speculate what happened.

davie

unread,

Jan 25, 2012, 12:30:10 PM1/25/12

to Google Maps JavaScript API v3

Hi
Probably this <?xml version="1.0" encoding="UTF-8"?> before DOCTYPE
I got it going with
<!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">
<head>
stolen from http://www.w3schools.com/html/html_xhtml_dtd.asp
Regards Davie

On Jan 25, 4:32 pm, Frank Natoli <frankjnat...@gmail.com> wrote:
> My regular ISP has a free webspace, with an upload feature, but when I
> tried uploading the two samples, async API loader in HTM, and async API
> loader in XHTML, the uploader fails and then hangs. Same for both IE 9.0
> and Safari 5.1.2. Put support request in with ISP.
>

> Found 000webhost.com that offers free web hosting. Created accountwww.discoverydata.net84.net. Uploaded two files to public_html, async.htm

Frank Natoli

unread,

Jan 25, 2012, 2:50:07 PM1/25/12

to google-map...@googlegroups.com

Davie: I made the DOCTYPE substitution that you show above, but for me the script showed a blank screen. Could you possibly e-mail to me your complete XHTML file with the DOCTYPE substitution? Please send to frankjnatoli-at-gmail.com. Also, did you base your script on what I posted earlier "hoping that I do not offend anyone"?

Reply all

Reply to author

Forward