javascript - Parsing YouTube API XML response with jQuery for Google Map -
i trying parse xml response youtube api jquery. goal take url links , geotag data results , insert markers google map. each marker have embedded youtube video in infowindow object. api request make youtube servers asks videos geotag data within 100km of coordinates. i’m working local file. have suggestions parsing xml , adding videos google map? trying multidimensional array approach. known problems: “latlng” variable undefined. it’s not supposed be. 1 of few leads problem. advice?
my code:
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function() { $.get("videos.xhtml", "xml", function(xml) { $(xml).find("entry").each(function() { var id = $(this).children('id').text(); var content = $(this).children('content').text(); var vid = $(this).children("link [rel=alternate]").attr("href"); var location = $(this).children('georss:where').children('gml:point').children('gml:pos').text().split(" -").join(","); var marker = new array(vid, location); var markers = new array(); markers.push(marker); var latlng = new google.maps.latlng(markers[0][1]); var markers = new array(); var myoptions = { zoom: 19, center: latlng, maptypeid: google.maps.maptypeid.hybrid }; var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); //var vidstring = '<div style="width:450; height: 400;"><object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/2a-fufereke&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/2a-fufereke&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object></div>'; //use arrays (a = 0; < markers.length; a++) { var vidarray = new array(markers[a][0]); var infowindow = new google.maps.infowindow({ content: vidarray // not emebeded }); } (i = 0; < markers.length; i++) { var newmarker = new google.maps.marker({ position: markers[i][1], map: map, title: "hello world" }); var marker1 = array(); marker1.push(newmarker); } (b = 0; b < markers.length; b++) { // how make add more marker listener google.maps.event.addlistener(marker1[b], "click", function(){ infowindow.open(map, marker1[b]) }); } alert(vid); }); }); }); //i need convert string </script> </head> <body> <div id="map_canvas" style="width:100%; height:100%"> </div> </body> </html>
as xml file should aware of "same origin policy". means can't load xml or json file server (in theory).
however, jquery offers jsonp-function around or can try alternative jquery-jsonp script.
http://api.jquery.com/jquery.ajax/ https://code.google.com/p/jquery-jsonp/
bye.
Comments
Post a Comment