Google Place API

  1. Get an API key
  2. Get library
  3. Get library
  4. Get library

Library: https://developers.google.com/maps/documentation/javascript/places

Example: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

Place types of autocomplete service:
https://developers.google.com/places/supported_types#table3

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Your Key]&libraries=places"></script>
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'short_name',
  postal_code: 'short_name'
};

$(document).ready(function(){
	initAutocomplete();
});

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
	// Get the place details from the autocomplete object.
	var p = autocomplete.getPlace();
	console.log(p);

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	var $c = $('.place-box');
	var cps = p.address_components;

	$c.find('[name="name"]').val(p.name);
	$c.find('[name="gmap_id"]').val(p.place_id);
	$c.find('[name="photo"]').val(get_photo(p));
	$c.find('[name="address"]').val(p.formatted_address);
	$c.find('[name="city"]').val(find_add_part(cps, 'administrative_area_level_1', 'long'));
	$c.find('[name="country"]').val(find_add_part(cps, 'country', 'short'));
	$c.find('[name="latitude"]').val(p.geometry.location.lat);
	$c.find('[name="longitude"]').val(p.geometry.location.lng);
	$c.find('[name="phone"]').val(p.international_phone_number);
	$c.find('[name="url"]').val(p.url);
}

function find_add_part(components, targetType, name_type){
	if(name_type == 'long'){
		var name_type = 'long_name';
	}else{
		var name_type = 'short_name';
	}

	for (var i = 0; i < components.length; i++) {
		var cp = components[i];
	    var types = cp.types;

	    for (var j = 0; j < types.length; j++) {
	    	var addType = types[j];
		    if (targetType == addType) {
		      var val = cp[name_type];
		      //document.getElementById(addressType).value = val;
		      return val;
		    }
		}
	}

	return '';
}

function get_photo(p){
	if(p.photos == null || p.photos.length == 0){
		return '';
	}
	
	var photo = p.photos[0];
	return photo.getUrl({'maxWidth': 500});
}

function get_place_detail(p){
	var params = {
		'placeid': p.place_id, 
		'key': 'key'
	}

	$.get(base_url + 'assets/place_detail.json', params, function(data){
		//console.log(data);
		var p = data.result;

		var $c = $('.place-box');

		$c.find('[name="name"]').val(p.name);
		$c.find('[name="gmap_id"]').val(p.place_id);
		$c.find('[name="photo"]').val(p.icon);
		$c.find('[name="address"]').val(p.formatted_address);
		$c.find('[name="city"]').val(p.address_components[2].long_name);
		$c.find('[name="country"]').val(p.address_components[4].short_name);
		$c.find('[name="latitude"]').val(p.geometry.location.lat);
		$c.find('[name="longitude"]').val(p.geometry.location.lng);
		$c.find('[name="phone"]').val(p.international_phone_number);
		$c.find('[name="url"]').val(p.url);
	});
}

function clear_fields(){
	var $c = $('.place-box');

	$c.find('[name="name"]').val('');
	$c.find('[name="gmap_id"]').val('');
	$c.find('[name="photo"]').val('');
	$c.find('[name="address"]').val('');
	$c.find('[name="city"]').val('');
	$c.find('[name="country"]').val('');
	$c.find('[name="latitude"]').val('');
	$c.find('[name="longitude"]').val('');
	$c.find('[name="phone"]').val('');
	$c.find('[name="url"]').val('');
}