javascript - Google Maps API v3 - Set destination but leave origin blank? -
i'm setting gmaps api current project, , map load direction map destination set (dynamically populated address), origin blank user can quickly/easily put in own address. examples i've seen require origin put in well. there way around this?
probably looking this:
function initmap() { var directionsservice = new google.maps.directionsservice; var directionsdisplay = new google.maps.directionsrenderer; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 7, center: { lat: 41.85, lng: -87.65 } }); directionsdisplay.setmap(map); var onchangehandler = function () { calculateanddisplayroute(directionsservice, directionsdisplay); }; document.getelementbyid('btngo').addeventlistener('click', onchangehandler); } function calculateanddisplayroute(directionsservice, directionsdisplay) { directionsservice.route({ origin: document.getelementbyid('start').value, destination: document.getelementbyid('end').value, travelmode: google.maps.travelmode.driving }, function (response, status) { if (status === google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); } else { window.alert('directions request failed due ' + status); } }); }
html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #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; }
<div id="floating-panel"> <b>start: </b> <input id="start"/> <b>end: </b> <select id="end"> <option value="chicago, il">chicago</option> <option value="st louis, mo">st louis</option> <option value="joplin, mo">joplin, mo</option> <option value="oklahoma city, ok">oklahoma city</option> <option value="amarillo, tx">amarillo</option> <option value="gallup, nm">gallup, nm</option> <option value="flagstaff, az">flagstaff, az</option> <option value="winona, az">winona</option> <option value="kingman, az">kingman</option> <option value="barstow, ca">barstow</option> <option value="san bernardino, ca">san bernardino</option> <option value="los angeles, ca">los angeles</option> </select> <button id="btngo">get directions</button> </div> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?callback=initmap" async defer></script>
basically it's customized version of directions service sample
example: start:
san francisco
Comments
Post a Comment