Dear Reader, Let us learn about to Display Country State City using Google API. As when you are talking about registration of any user to your application. Then you must need to Display Country State City select box for address locations, which user will need to fill during his/her registration process. And if a user wants to fill his address then an address panel should be there. So that user can fill his address location like Country State City from the input box provided by you, without any tease. Therefore Google API will be the best option for us. So we are going to “Display Country State City using Google API“.
For this, we need to generate Google API Key from Get a key for Google Places API Web Service. As for example :- AIzaSyC-zm16nNi4K_92bmvJppoV_0WwNVFH4WA . But for your ease, we are giving you pre-generated Google API Key. This is placed in the code. So right now, you don’t need to go to Developers Google WebSite for generation of API Key. You just need to copy and paste the code given below for checking to Display Country State City using Google API.
Let us start it step by step:-
Step 1.
You need to create an HTML page having an input box for taking location input.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Display Country State City using Google API</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Address:</label> <div class="col-sm-8"> <input type="text" id="ownPlaces" name="ownPlaces" /> <input type="text" id="ownCity" name="ownCity" placeholder="Own City" /> <input type="text" id="ownState" name="ownState" placeholder="Own State" /> <input type="text" id="ownCountry" name="ownCountry" placeholder="Own Country" /> </div> </div> </body> </html> |
Step 2.
Now you need to call Google API script.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyCXFJ-lc7cHHcEklG2_oIhTnPKTWsLwHEU"></script> <script> google.maps.event.addDomListener(window, 'load', function () { var places = new google.maps.places.Autocomplete(document.getElementById('ownPlaces')); google.maps.event.addListener(places, 'place_changed', function () { console.log(places.getPlace()); var getaddress = places.getPlace(); //alert(getaddress.address_components[0].long_name); //alert(getaddress.formatted_address); var whole_address = getaddress.formatted_address; var split_whole_address = whole_address.split(','); //alert(split_whole_address); var whole_address_length = split_whole_address.length; //alert(whole_address_length); if(whole_address_length == 2) { var ownCity = split_whole_address[0]; //alert(ownCity+'ownCity'); var ownState = split_whole_address[0]; //alert(ownState+'ownState'); var ownCountry = split_whole_address[1]; //alert(ownCountry+'ownCountry'); $('#ownCity').val(ownCity); $('#ownState').val(ownState); $('#ownCountry').val(ownCountry); } else { var ownCity = split_whole_address[0]; //alert(ownCity+'ownCity'); var ownState = split_whole_address[1]; //alert(ownState+'ownState'); var ownCountry = split_whole_address[2]; //alert(ownCountry+'ownCountry'); $('#ownCity').val(ownCity); $('#ownState').val(ownState); $('#ownCountry').val(ownCountry); } }); }); </script> |
Now you can see your result. As the user will type any letter then Google API will display suggestions of locations with Country, State, and City. So it will be easier for a user as well as a developer to display the Country, State, and City selection. It was an old pattern that you need to select Country from a drop-down select box and then on selection of Country, State select box will be filled with data from all States of that selected Country. And on a selection of any particular State, City select box will be populated with All City data of that particular State selected.
Step 3.
Hence this is final or single Step to Follow. Here is full code file named get_location.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Display Country State City using Google API</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Address:</label> <div class="col-sm-8"> <input type="text" id="ownPlaces" name="ownPlaces" /> <input type="text" id="ownCity" name="ownCity" placeholder="Own City"/> <input type="text" id="ownState" name="ownState" placeholder="Own State" /> <input type="text" id="ownCountry" name="ownCountry" placeholder="Own Country" /> </div> </div> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyCXFJ-lc7cHHcEklG2_oIhTnPKTWsLwHEU"></script> <script> google.maps.event.addDomListener(window, 'load', function () { var places = new google.maps.places.Autocomplete(document.getElementById('ownPlaces')); google.maps.event.addListener(places, 'place_changed', function () { console.log(places.getPlace()); var getaddress = places.getPlace(); //alert(getaddress.address_components[0].long_name); //alert(getaddress.formatted_address); var whole_address = getaddress.formatted_address; var split_whole_address = whole_address.split(','); //alert(split_whole_address); var whole_address_length = split_whole_address.length; //alert(whole_address_length); if(whole_address_length == 2) { var ownCity = split_whole_address[0]; //alert(ownCity+'ownCity'); var ownState = split_whole_address[0]; //alert(ownState+'ownState'); var ownCountry = split_whole_address[1]; //alert(ownCountry+'ownCountry'); $('#ownCity').val(ownCity); $('#ownState').val(ownState); $('#ownCountry').val(ownCountry); } else { var ownCity = split_whole_address[0]; //alert(ownCity+'ownCity'); var ownState = split_whole_address[1]; //alert(ownState+'ownState'); var ownCountry = split_whole_address[2]; //alert(ownCountry+'ownCountry'); $('#ownCity').val(ownCity); $('#ownState').val(ownState); $('#ownCountry').val(ownCountry); } }); }); </script> |
On selection of location, next three input boxes will be auto-filled with City, State, and Country respectively.
Recently Updated Code :-
In recent days I got some mistakes has been done with above code. So below are Updated One with Error Free Code and It will display Proper City, State, Country and PIN Code in their respective fields.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Display Country State City using Google API</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Address:</label> <div class="col-sm-8"> <input type="text" id="ownPlaces" name="ownPlaces" /> <input type="text" id="ownCity" name="ownCity" placeholder="Own City" /> <input type="text" id="ownState" name="ownState" placeholder="Own State" /> <input type="text" id="ownCountry" name="ownCountry" placeholder="Own Country" /> <input type="text" id="ownPinCode" name="ownPinCode" placeholder="Own Pin Code" /> </div> </div> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyCXFJ-lc7cHHcEklG2_oIhTnPKTWsLwHEU"></script> <script> google.maps.event.addDomListener(window, 'load', function () { var places = new google.maps.places.Autocomplete(document.getElementById('ownPlaces')); google.maps.event.addListener(places, 'place_changed', function () { console.log(places.getPlace()); var getaddress = places.getPlace(); //alert(getaddress.address_components[0].long_name); var whole_address = getaddress.address_components; //alert(whole_address + 'whole_address'); $('#ownCity').val(''); $('#ownState').val(''); $('#ownCountry').val(''); $('#ownPinCode').val(''); $.each(whole_address, function(key1, value1) { //alert(value1.long_name); //alert(value1.types[0]); if((value1.types[0]) == 'locality') { var prev_long_name_city = value1.long_name; //alert(prev_long_name_city + '__prev_long_name_city'); $('#ownCity').val(prev_long_name_city); } if((value1.types[0]) == 'administrative_area_level_1') { var prev_long_name_state = value1.long_name; //alert(prev_long_name_state + '__prev_long_name_state'); $('#ownState').val(prev_long_name_state); } if((value1.types[0]) == 'country') { var prev_long_name_country = value1.long_name; //alert(prev_long_name_country + '__prev_long_name_country'); $('#ownCountry').val(prev_long_name_country); } if((value1.types[0]) == 'postal_code') { var prev_long_name_pincode = value1.long_name; //alert(prev_long_name_pincode + '__prev_long_name_pincode'); $('#ownPinCode').val(prev_long_name_pincode); } }); }); }); </script> |
Hence Locations provided by you in the “Enter the Location” input box will be fetched by Google API on every KeyUp Event of the keyboard.
Congratulations you have successfully Completed to Display Country State City using Google API, if you like this post and was helpful for you then share this post on social media and if you have any query then please contact us or comment below and don’t Forget Like and Follow us on Social Media, Thanks.
4 Comments:
Farah September 06, 2018
very nice article.
Very informative.
Keep it up
Webpreparations Team September 07, 2018
Dear Reader
Thank you so much for your appreciation, we are always ready to share our knowledge 🙂
shani May 18, 2019
that’s good
Webpreparations Team May 22, 2019
Thank you so much dear for your appreciation 🙂