KML and HTML5 <audio>: Does it work?
mhulse
Here's a snippet from my KML file:
<https://gist.github.com/1235806>
Using firebug, it looks like the HTML5 audio tags are completely stripped from the bubble.
Is there a way to make this work? Are certain tags not allowed within the CDATA block of an information window/bubble?
I can think of alternative solutions involving javascript, but it would make my life a lot easier if I could keep things simple.
Any tips would be greatly appreciated.
Oh, I would love to see examples of alternative, non-Flash, solutions! Anyone feel like sharing? :)
Many thanks in advance!
Cheers,
Micky
Micky Hulse
> Here's a snippet from my KML file:
> <https://gist.github.com/1235806>
I have added the generated HTML source code:
<https://gist.github.com/1235806#file_output.html>
Any thoughts?
Thank you!
Cheers,
Micky
Barry Hunter
They strip allowed lots of content. Mainly to make it harder for
malicious users to insert code into the main Google maps site, or even
your site (if you allow users to paste a url of a KML file)
... but if you trust the KML author (yourself!) and dont allow
arbitary KML files to be loaded. can though javascript allow just
about any content.
Will need to either use a third party KML parser, or a trick like in
the "KML Feature Details" section
http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers
which takes the raw kml description and renders it in a infowindow
manually. In that way should be able to display any HTML the users
browser is capable of rendering.
> --
> 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/-/K_hLgF1vMmAJ.
> 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.
>
Micky Hulse
On Thu, Sep 22, 2011 at 1:00 PM, Barry Hunter <barryb...@gmail.com> wrote:
> which takes the raw kml description and renders it in a infowindow
> manually. In that way should be able to display any HTML the users
> browser is capable of rendering.
Ahhhh, that's cool!!!! I just tested the example code given on the
docs page and I was able to display the description in another div on
the page! Cool! I will definitely be using this technique for this
project. :)
Unfortunately, the kml description was not the "raw" version; the
audio tag html was not included. :(
On the other hand, I could use ajax and query my database to pull the
audio file info into the div for display... But before I go that far,
maybe I am missing something? That would be really cool if I could get
my hands on the "raw" kml description!
Thanks again Barry! Sorry in advance if I am overlooking something
really obvious. :D
Cheers,
Micky
Barry Hunter
> Unfortunately, the kml description was not the "raw" version; the
> audio tag html was not included. :(
Oh. Sorry.
Its been a while since I tried, was sure the description was the raw
unmodified version
http://code.google.com/apis/maps/documentation/javascript/reference.html#KmlFeatureData
and infoWindowHtml was the 'scrubbed' version.
Maybe that's changed now :( [Or my memory is failing!]
Micky Hulse
> Oh. Sorry.
Absolutely no worries at all! You have been very helpful! I can't
thank you enough. :)
> and infoWindowHtml was the 'scrubbed' version.
> Maybe that's changed now :( [Or my memory is failing!]
From what I have tested so far:
var text = kmlEvent.featureData.infoWindowHtml;
... and:
var text = kmlEvent.featureData.description;
Unfortunately, neither give me access to the <audio> html bits. :(
Looks like maybe a custom KML parser is in my future? Any recommendations?
Alternatively, I could maybe use ajax to pull audio and HTML into the
page when someone click a point (using the "KML Feature Details" you
showed me from our previous e-mails).
Hmmm, I know the possibilities are almost endless, it's just choosing
the best one for the job! :D
Thanks again for all the help Barry! I owe you one. :)
Cheers,
Micky
Barry Hunter
http://code.google.com/p/geoxml3/
But there are probably others.
> --
> You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
Micky Hulse
> The only one I know about
> http://code.google.com/p/geoxml3/
Cool! I will give it a test drive and let you/the gorup know how it goes.
Again, thank you so much! :)
Micky Hulse
> Cool! I will give it a test drive and let you/the gorup know how it goes.
Cool! I think that did the trick. :)
Well, I am having some issues with the HTML5 audio player now, and
this stopped working:
google.maps.event.addListener(overlay, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
Where "overlay" is:
var overlay = new geoXML3.parser(options);
overlay.parse('http://foo.com/data.kml');
I think I just need to kick the tires a few times and everything will work out.
Barry, thanks so much for showing me the light! :D
Have an awesome day!
Cheers,
Micky
Barry Hunter
geoxml3 layer.
Instead can define a callback, see usage 2 here:
http://code.google.com/p/geoxml3/wiki/Usage
And then have you code also setup some click handlers on the created
placemarks.
Slightly different usage, but can do the same thing.
Micky Hulse
> Slightly different usage, but can do the same thing.
That's great news! This is exciting. I was kinda thinking that adding
HTML5 audio to my info windows was going to be near impossible.... I
can't wait for this weekend when I really have more free time to dig
into the details.
Thanks again Barry! You have been very helpful. I really appreciate
all of your pro advice and guidance. :)
Have a great night.
Cheers,
MIcky
Micky Hulse
On Thu, Sep 22, 2011 at 5:34 PM, Barry Hunter <barryb...@gmail.com> wrote:
> Instead can define a callback, see usage 2 here:
> http://code.google.com/p/geoxml3/wiki/Usage
> And then have you code also setup some click handlers on the created
> placemarks.
> Slightly different usage, but can do the same thing.
I thought I would reply with an update... Based on your advice, here's
the code I am using to show the geoXML3 description in another div on
the page:
<https://gist.github.com/1241336>
A few things that I discovered:
1.
With the "suppressInfoWindows" option turned on, I could no longer
access the infoWindow's description.
As a patch, I added this code on the marker click event listener:
marker.infoWindow.close();
In essence, the marker's infoWindow does not show, but is still
accessible via the DOM.
2.
Initially, I was using this version of geoXML3:
<http://code.google.com/p/geoxml3/source/browse/trunk/geoxml3.js>
Unfortunately, the "suppressInfoWindows" option was malfunctioning; I
ended up using this branch instead:
<http://code.google.com/p/geoxml3/source/browse/branches/polys/geoxml3.js>
In the above version, the "suppressInfoWindows" option works... Don't
ask me why. :)
=============
Thanks again for all of your help!
Please let me know if you see anything wrong with my code.
Thanks a billion for all of your help!
Have an excellent day!
Cheers,
Micky