City search autocomplete with google API

6 comments
Some years ago, we were working very hard to create city search auto complete box. We needed to create database for city list and then retrieve the city list from database using j query/Ajax. But now, Google provide the facility to create city search auto complete very easy. Now we need to paste a URL from Google and write some lines of code that's it. In this post we will create the city search box without using database.

let's start:

First of all we will create a html file called index.html. Then paste the below code before closing </herad> tag.



<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script type="text/javascript">
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function city_search(textbox_id) {
   if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById(textbox_id)),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
   
  });
}
</script>

Now we create a text box under body tag like this:



<input type="text" id="city_search" name="city_search" />

And then, we will call city_search() function on onfocus event.



<input type="text" id="city_search" name="city_search" onFocus="city_search('city_search')" />

Now we are done. open the index.html file in brwser and type any city name. If all the things are correct then you will see the result like this.




Here is the complete code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>city search autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script type="text/javascript">
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function city_search(textbox_id) {
   if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById(textbox_id)),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
   
  });
}
</script>
</head>

<body>

<input type="text" id="city_search" name="city_search" onFocus="city_search('city_search')" />
</body>
</html>

6 comments :

  1. Hiiiiiiiii I am amit........ I use this code. it is very simple & easy way apply.there is need of any database, jquery, Ajax. etc...... thank you sir posting of this type of post......... but I want search city according to state................

    ReplyDelete
  2. help me about this...........

    ReplyDelete
    Replies
    1. Hi Amit,

      Thanks for your comments. i will write write the post for search city by name soon. once again thank you.

      Delete
  3. Welcome, sir but you think about the city search by state name that's being more batter........... I knew that you help me.......................

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete