javascript - Loading issue on Google Place Autocomplete API Html -
i have use google map place autocomplete api web.
<form> <input id="origin-input" type="text" class="form-control" placeholder="from"/> <br/> <input id="destination-input" type="text" class="form-control" placeholder="to"/> <br/> <div> <button id="now" onclick="selectdatetime(this.id)">now</button> <button id="later" onclick="selectdatetime(this.id)">later</button> </div> <br/> <div id="now_later" > </div> <button onclick="handlemap()">submit</button> <script> function selectdatetime(elemid){ var html = ''; if (elemid == "now") { html += '<div class="btn-group btn-group-justified" id="within_now">'; html += '<div class="btn-group" >'; html += '15 min <input type="radio" name="within_min" id="within_min" value="15"> '; html += '30 min <input type="radio" name="within_min" id="within_min" value="30"> '; html += '45 min <input type="radio" name="within_min" id="within_min" value="45" checked=""> '; html += '</div>'; html += '</div>'; } document.getelementbyid("now_later").innerhtml = html; } </script> </form> </div> <div id="map" class="service col-sm-4"></div> <script> function initmap() var origin_input = document.getelementbyid('origin-input'); origin_input.value = ''; var destination_input = document.getelementbyid('destination-input'); destination_input.value = ''; /* set autocomplete on textboxes */ var autocompleteorigin; var autocompletedest; var map = null; map = new google.maps.map(document.getelementbyid('map'), { center: {lat: 20.5937, lng: 78.9629}, zoom: 8}); var infowindow = new google.maps.infowindow({map: map}); // html5 geolocation. (loads when page 1st loads - marks current location on map) if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position){ var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infowindow.setposition(pos); infowindow.setcontent('location found.'); map.setcenter(pos); }, function() { handlelocationerror(true, infowindow, map.getcenter()); }); } else { // browser doesn't support geolocation handlelocationerror(false, infowindow, map.getcenter()); } /*set autocomplete on textboxes*/ autocompleteorigin = new google.maps.places.autocomplete(origin_input); autocompletedest = new google.maps.places.autocomplete(destination_input); /*set directionservice*/ var directionsservice = new google.maps.directionsservice; var directionsdisplay = new google.maps.directionsrenderer; directionsdisplay.setmap(map); // create search box , link ui element. var travel_mode = 'driving'; /* add bounds map */ autocompleteorigin.bindto('bounds', map); autocompletedest.bindto('bounds', map); function expandviewporttofitplace(map, place) { if (place.geometry.viewport) { map.fitbounds(place.geometry.viewport); } else { map.setcenter(place.geometry.location); map.setzoom(17); } } var origin_place_id = null, destination_place_id = null; // set place_changed listner on autocomplete text boxes autocompleteorigin.addlistener('place_changed', function() { var place = autocompleteorigin.getplace(); if (!place.geometry) { window.alert("autocomplete's returned place contains no geometry"); return; } expandviewporttofitplace(map, place); // if place has geometry, store place id , route if have // other place id origin_place_id = place.place_id; route(origin_place_id, destination_place_id, travel_mode, directionsservice, directionsdisplay); }); autocompletedest.addlistener('place_changed', function() { var place = autocompletedest.getplace(); if (!place.geometry) { window.alert("autocomplete's returned place contains no geometry"); return; } expandviewporttofitplace(map, place); // if place has geometry, store place id , route if have // other place id destination_place_id = place.place_id; route(origin_place_id, destination_place_id, travel_mode, directionsservice, directionsdisplay); }); the problems i'm facing are:
1) if press enter while selecting autocomplete entire page loads , if use mouse select autocomplete option page doesn't load.
2) on clicking button, entire page loads instead of updating div now_later
3) on clicking submit button entire page loads again
i don't want page loaded on clicking button or updating autocomplete. i'm facing issue because of autocomplete place api. ultimate aim plot route between source , destination once user enters source , destination. if user clicks on div should expand. further when user clicks on submit, map updated other stuff.
please me. tell me go wrong , how rectify it. if can solve 1 issue great. in advance.
just replacing <form> tag <div> tag solve loading problem , allow use enter key selection of option in autocomplete.
Comments
Post a Comment