javascript - Combining Google Directions and Google Places -
i seek create search bar on site, utilize 2 google apis.
basing on google api documentation i've written code.
function calcroute() { //setting variables google places api request var start = 'starting point'; var end = 'destination point'; var service; var moscow = new google.maps.latlng(55.749646,37.62368); var places = []; var request1 = { location: moscow, radius: '50000', query: start }; var request2 = { location: moscow, radius: '50000', query: end }; //setting variables google directions api var directionsdisplay; var directionsservice = new google.maps.directionsservice(); //executing google places request service = new google.maps.places.placesservice(); service.textsearch(request1, callback1); service.textsearch(request2, callback2); function callback1(results, status) { if (status == google.maps.places.placesservicestatus.ok) { places[0] = results[0].formatted_address; } else { document.getelementbyid("directionspanel").innerhtml = "<br/><b>sorry, directions not found.</b><br/><br/>"; return; } } function callback2(results, status) { if (status == google.maps.places.placesservicestatus.ok) { places[1] = results[1].formatted_address; //executing google directions request var request = { origin:places[0], destination:places[1], travelmode: google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { var myoptions = { zoom: 8, streetviewcontrol: false, maptypeid: google.maps.maptypeid.roadmap }; directionsdisplay = new google.maps.directionsrenderer(); map = new google.maps.map(document.getelementbyid("map_canvas2"), myoptions); directionsdisplay.setmap(map); directionsdisplay.setdirections(response); directionsdisplay.setpanel(document.getelementbyid("directionspanel")); } else { document.getelementbyid("directionspanel").innerhtml = "<br/><b>sorry, directions not found.</b><br/><br/>"; }; }); //end of google directions request } else { document.getelementbyid("directionspanel").innerhtml = "<br/><b>sorry, directions not found.</b><br/><br/>"; return; } } //closing calcroute() function } here's html
<html> <head> <link href="../images/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <script src="../scripts/map.js" type="text/javascript"></script> </head> <body onload="calcroute();"> <form name="joe"> <input type="hidden" name="burns" /> </form> <div id="external"> <div id="wrap"> <div id="header" align="center"><img src="../images/illustrations/header.gif" alt="air moscow" /> </div> <div style="background:#ccdbe3; margin:0px 5px; float:left; width:736px; margin-bottom:10px;"> <div style="background:#fff; margin:15px; border:1px #999 solid;"> <div id="directionspanel"></div> <div style="float:right; width:370px; height:600px; border:2px solid #306b8e; margin:30px 10px 0px 10px;" id="map_canvas2"> </div> <div style="clear:both; margin-bottom:50px;"></div> </div> </div> </div> <div id="footer"> </div> </div> </body> </html> when test it, chrome js console throws "uncaught typeerror: cannot read property 'innerhtml' of undefined". however, both 2 divs defined , there no typo errors in id's.
i think need api key google places work.
besides that, there else need code work properly?
this works me. think has way initializing things:
<script> var map; var places = []; var service; var bounds = new google.maps.latlngbounds(); var directionsdisplay; var directionsservice = new google.maps.directionsservice(); var moscow = new google.maps.latlng(55.749646,37.62368); var start = 'kremlin'; var end = 'hotel peter'; var request1 = { location: moscow, radius: '50000', query: start }; var request2 = { location: moscow, radius: '50000', query: end }; function initialize() { directionsdisplay = new google.maps.directionsrenderer(); var myoptions = { center: moscow, zoom: 15, streetviewcontrol: false, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); directionsdisplay.setmap(map); service = new google.maps.places.placesservice(map); directionsservice = new google.maps.directionsservice(); directionsdisplay.setmap(map); calcroute(); } function calcroute() { //executing google places request service.textsearch(request1, callback1); } function callback1(results, status) { if (status == google.maps.places.placesservicestatus.ok) { places[0] = results[0].geometry.location; map.setcenter(places[0]); var marker1= new google.maps.marker({position: places[0], map:map}); bounds.extend(places[0]); service.textsearch(request2, callback2); } else { document.getelementbyid("directionspanel").innerhtml = "<br/><b>sorry, directions not found.</b><br/>"+start+"<br/>"; return; } } function callback2(results, status) { if (status == google.maps.places.placesservicestatus.ok) { places[1] = results[0].geometry.location; bounds.extend(places[1]); map.fitbounds(bounds); var marker2= new google.maps.marker({position: places[0], map:map}); //executing google directions request var request = { origin:places[0], destination:places[1], travelmode: google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay = new google.maps.directionsrenderer(); directionsdisplay.setmap(map); directionsdisplay.setpanel(document.getelementbyid("directionspanel")); directionsdisplay.setdirections(response); } else { document.getelementbyid("directionspanel").innerhtml = "<br/><b>sorry, directions not found.</b><br/><br/>"; }; }); //end of google directions request } else { document.getelementbyid("directionspanel").innerhtml = "<br/><b>sorry, directions not found.</b><br/>"+end+"<br/>"; return; } } google.maps.event.adddomlistener(window,'load',initialize); </script> working example
javascript google-maps-api-3
No comments:
Post a Comment