Google Directions Api JavaScript linking API key into php file -
i have simple index.php linked apache server in xampp on windows. trying see how google direction service api works javascript example , want play bit. in order make use of it, need create server key, correctly added ip address , generated random key me. have key how put php file allows me view map because of course 1 example , gives me authorization error.
i read on google developers page "to specify key in request, include value of key parameter." may problem how do if answer? api key declared right @ bottom.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>directions service (complex)</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #warnings-panel { width: 100%; height:10%; text-align: center; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'roboto','sans-serif'; line-height: 30px; padding-left: 10px; } </style> </head> <body> <div id="floating-panel"> <b>start: </b> <select id="start"> <option value="penn station, new york, ny">penn station</option> <option value="grand central station, new york, ny">grand central station</option> <option value="625 8th avenue, new york, ny, 10018">port authority bus terminal</option> <option value="staten island ferry terminal, new york, ny">staten island ferry terminal</option> <option value="101 e 125th street, new york, ny">harlem - 125th st station</option> </select> <b>end: </b> <select id="end"> <option value="260 broadway new york ny 10007">city hall</option> <option value="w 49th st & 5th ave, new york, ny 10020">rockefeller center</option> <option value="moma, new york, ny">moma</option> <option value="350 5th ave, new york, ny, 10118">empire state building</option> <option value="253 west 125th street, new york, ny">apollo theater</option> <option value="1 wall st, new york, ny">wall st</option> </select> </div> <div id="map"></div> <div id="warnings-panel"></div> <script> function initmap() { var markerarray = []; // instantiate directions service. var directionsservice = new google.maps.directionsservice; // create map , center on manhattan. var map = new google.maps.map(document.getelementbyid('map'), { zoom: 13, center: {lat: 40.771, lng: -73.974} }); // create renderer directions , bind map. var directionsdisplay = new google.maps.directionsrenderer({map: map}); // instantiate info window hold step text. var stepdisplay = new google.maps.infowindow; // display route between initial start , end selections. calculateanddisplayroute( directionsdisplay, directionsservice, markerarray, stepdisplay, map); // listen change events start , end lists. var onchangehandler = function() { calculateanddisplayroute( directionsdisplay, directionsservice, markerarray, stepdisplay, map); }; document.getelementbyid('start').addeventlistener('change', onchangehandler); document.getelementbyid('end').addeventlistener('change', onchangehandler); } function calculateanddisplayroute(directionsdisplay, directionsservice, markerarray, stepdisplay, map) { // first, remove existing markers map. (var = 0; < markerarray.length; i++) { markerarray[i].setmap(null); } // retrieve start , end locations , create directionsrequest using // walking directions. directionsservice.route({ origin: document.getelementbyid('start').value, destination: document.getelementbyid('end').value, travelmode: google.maps.travelmode.walking }, function(response, status) { // route directions , pass response function create // markers each step. if (status === google.maps.directionsstatus.ok) { document.getelementbyid('warnings-panel').innerhtml = '<b>' + response.routes[0].warnings + '</b>'; directionsdisplay.setdirections(response); showsteps(response, markerarray, stepdisplay, map); } else { window.alert('directions request failed due ' + status); } }); } function showsteps(directionresult, markerarray, stepdisplay, map) { // each step, place marker, , add text marker's infowindow. // attach marker array can keep track of , remove // when calculating new routes. var myroute = directionresult.routes[0].legs[0]; (var = 0; < myroute.steps.length; i++) { var marker = markerarray[i] = markerarray[i] || new google.maps.marker; marker.setmap(map); marker.setposition(myroute.steps[i].start_location); attachinstructiontext(stepdisplay, marker, myroute.steps[i].instructions); } } function attachinstructiontext(stepdisplay, marker, text, map) { google.maps.event.addlistener(marker, 'click', function() { // open info window when marker clicked on, containing text // of step. stepdisplay.setcontent(text); stepdisplay.open(map, marker); }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=api_key&signed_in=true&callback=initmap" async defer></script> </body> </html>
in script tag, add key query string...
<script src="https://maps.googleapis.com/maps/api/js?key=paste_key_here&..." async defer></script> for example, key 12345, src value of script tag should be...
<script src="https://maps.googleapis.com/maps/api/js?key=12345&..." async defer></script> 
Comments
Post a Comment