javascript - Mashup Google maps & photos by Flickr -
i've problems little script permits me create mashup google maps , photos flickr. creates simple map rome milan , after that, requests ten images flickr based on geotag. @ end, positions every photo marker taken google.
but can't understand i've done wrong. have ideas?
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>mappa+info</title> <style type="text/css"> html, body { margin:0; padding:0; width:100%; height:100%; } body { background:#ffffff; color:#000000; font-family:arial, helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;} #map { width:100%; height:100%; } input { width:250px; } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasyc0ham8pi7rmquism444jdehtjoswbte_e&sensor=true"></script> <script type="text/javascript"> var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var map; var latlongp1; var latlongp2; function initialize() { calcroute(); directionsdisplay = new google.maps.directionsrenderer(); var myoptions = { zoom:7, maptypeid: google.maps.maptypeid.roadmap } map = new google.maps.map(document.getelementbyid("map"), myoptions); directionsdisplay.setmap(map); var latlonbounds=map.getbounds(); alert(latlonbounds.getnortheast()); latlongp1=latlonbounds.getnortheast(); latlongp2=latlonbounds.getsouthwest(); posizionafoto(); } function calcroute() { var partenza = "roma"; var arrivo = "milano"; var request = { origin:partenza, destination:arrivo, travelmode: google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); } }); } function posizionafoto(){ //richiesta flickr var bbox=latlongp1.lat()+","+latlongp1.lng()+","+latlongp2.lat()+","+latlongp2.lon(); var apikey="48770d8235b7055d803bd8d913304624"; var url="http://api.flickr.com/services/rest/?"+ "method=flickr.photos.search"+ "&format=json"+ "&per_page=10"+ "&extras=geo"+ "&bbox="+bbox+ "&nojsoncallback=1"+ "&api_key="+apikey; var client =new xmlhttprequest(); client.open("get",url,true); client.send(); client.onreadystatechange=function(){ if((client.readystate==4)&&(client.status==200)){ var data=json.parse(client.responsetext); var photos=data.photos; //creazione marker per foto var photo=photos.photo; var aphoto; var url; for(var k in photo){ aphoto=photo[k]; var markericon=new google.maps.markerimage("http://farm"+aphoto.farm+"static.flickr.com/"+aphoto.server +"/"+aphoto.id+"_"+aphoto.secret+"_b.jpg"); var latlonphoto=new google.maps.latlng(aphoto.latitude,aphoto.longitude); var markeroptions={ map:map, position:latlonphoto, icon:markericon }; marker=new google.maps.marker(markeroptions); } } }; } window.onload = initialize; </script> </head> <body> <div id="map"></div> </body>
in line set markericon there "." missing before "static"
Comments
Post a Comment