Implementing google place autocomplete -
this code places autocomplete , search.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"> </script> <script> var geocoder; var map; function initialize() { var input = document.getelementbyid('address'); var options = { componentrestrictions: {country: "in"} }; var autocomplete = new google.maps.places.autocomplete(input,options); geocoder = new google.maps.geocoder(); //var latlng = new google.maps.latlng(18.52043030000, 73.85674369999); var mapoptions = { zoom: 15, //center: latlng, maptypeid: google.maps.maptypeid.roadmap, } map = new google.maps.map(document.getelementbyid('googlemap'), mapoptions); } function codeaddress() { var address = document.getelementbyid('address').value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { map.setcenter(results[0].geometry.location); var marker = new google.maps.marker({ map: map, position: results[0].geometry.location }); } else { alert('geocode not successful following reason: ' + status); } }); } google.maps.event.adddomlistener(window, 'load', initialize); </script>
this html code.
<input id="address" type="textbox" size="30"> <input type="button" value="search" onclick="codeaddress()">
it working fine dont want user click button. when suggestions appeared, , when user select of suggestion options, map have navigate place. how do this???
when user select option dropdown, map should navigate place.
take @ this example , implementation of place_changed
event.
var place = autocomplete.getplace(); // if place has geometry, present on map. if (place.geometry.viewport) { map.fitbounds(place.geometry.viewport); } else { map.setcenter(place.geometry.location); }
this way can pan map location of autocomplete result.
Comments
Post a Comment