Autocomplete google map api use to find postal code only by addresspicker -
i want search postal code using address,city etc auto complete google api . using code .it providing location , place details need postal ,if there suggestion please provide.
<!doctype html> <html> <head> <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes /base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://xilinus.com/jquery-addresspicker/src/jquery.ui.addresspicker.js"> </script> <meta charset=utf-8 /> <title>js bin</title> <style type="text/css"> #map { border: 1px solid #ddd; width:300px; height: 300px; float:left; margin: 0px 0 0 10px; -webkit-box-shadow: #aaa 0px 0px 15px; } div { font-family: arial; font-size: 10pt; } </style> <script type="text/javascript"> $(document).ready(function () { var geocoder = new google.maps.geocoder(); $("#addresspicker").autocomplete({ source: function (request, response) { geocoder.geocode({ address: request.term }, function (results, status) { if (status === google.maps.geocoderstatus.ok) { response($.map(results, function(result) { if ($.inarray("street_address", result.types) >= 0) { return result.formatted_address; } })); } }); }, select: function (event, ui) { var parts = ui.item.label.split(",") , address1 = parts[0] , address2 = parts.slice(1).join(",").trim(); $("#postal").val(address1 + "\n" + address2); } }); }); $(function() { var addresspicker = $("#addresspicker").addresspicker(); var addresspickermap = $( "#addresspicker_map" ).addresspicker({ elements: { map: "#map", lat: "#lat", lng: "#lng", locality: '#locality', country: '#country' } }); var gmarker = addresspickermap.addresspicker( "marker"); gmarker.setvisible(true); addresspickermap.addresspicker( "updateposition"); }); </script> </head> <body> <div> <label>address : </label><input id="addresspicker" /> </div> <br/> <br/> <div> <div> <label>address : </label> <input id="addresspicker_map" /> <br/> <label>locality: </label> <input id="locality" disabled=disabled> <br/> <label>country: </label> <input id="country" disabled=disabled> <br/> <label>latitude: </label> <input id="lat" disabled=disabled> <br/> <label>longitude: </label> <input id="lng" disabled=disabled> <br/> <label>postal: </label> <input id="postal" disabled=disabled> <br/> </div> <br/> <div id="map"></div> </div> </body> </html> thanks in advance.......
i haven't used jquery.ui.addresspicker may find usefull
you can use autocomplete.getplace(); function json object "can" contain post code dependent on search query.
i'll try keep vanilla js
the docs here explain https://developers.google.com/places/documentation/autocomplete
// autocomplete search restriction (if required) var options = { types: ['(regions)'], componentrestrictions: { country: "au" } } // create autocomplete feild var input = (document.getelementbyid('addresspicker')); var autocomplete = new google.maps.places.autocomplete(input, options); var infowindow = new google.maps.infowindow(); // fired when autocomplete option selected or input submitted google.maps.event.addlistener(autocomplete, 'place_changed', function() { infowindow.close(); var place = autocomplete.getplace(); // pull out data need ... }); i have validation function wrote well. if need more help, comment , add links.
Comments
Post a Comment