xblitz/address_autocomplete.html

## address_autocomplete.html
<!DOCTYPE html>
<html>
<head>
	<title>Place Autocomplete Address Form</title>
	<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
	<script>

var placeSearch, autocomplete;
var componentForm = {
	street_number: 'short_name',
	route: 'long_name',
	locality: 'long_name',
	administrative_area_level_1: 'short_name',
	postal_code: 'short_name',
	country: 'long_name'
};

function initialize() {
	autocomplete = new google.maps.places.Autocomplete( document.getElementById('autocomplete'), {
//		componentRestrictions: {country: 'ca'}
	});
	google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
	//var map = new google.maps.Map(document.getElementById("map_canvas"));
}

function fillInAddress() {
	var place = autocomplete.getPlace();

	for (var component in componentForm) {
		document.getElementById(component).value = '';
	}

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	for (var i = 0; i < place.address_components.length; i++) {
		var addressType = place.address_components[i].types[0];
		if (componentForm[addressType]) {
			var val = place.address_components[i][componentForm[addressType]];
			document.getElementById(addressType).value = val;
		}
	}
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {

	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());
	});
  }
}
// [END region_geolocation]

	</script>

</head>

<body onload="initialize()">

	<div id="locationField">
		<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" style="width: 500px;"></input>
	</div>
	<br><br>

<input id="name" style="width: 205px;"><br>
<input id="street_number"  style="width: 44px;">
<input id="route" style="width: 150px;"><br>
<input id="locality"  style="width: 150px;">
<input id="administrative_area_level_1" style="width: 44px;"><br>
<input id="country">
<input id="postal_code"><br>
<br>
<div id="map_canvas" style="width: 300px; height: 200px;"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Place Autocomplete Address Form</title>
	<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
	<script>

	var placeSearch, autocomplete;
	var componentForm = {
	street_number: 'short_name',
	route: 'long_name',
	locality: 'long_name',
	administrative_area_level_1: 'short_name',
	postal_code: 'short_name',
	country: 'long_name'
	};

	function initialize() {
	autocomplete = new google.maps.places.Autocomplete( document.getElementById('autocomplete'), {
	// componentRestrictions: {country: 'ca'}
	});
	google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
	//var map = new google.maps.Map(document.getElementById("map_canvas"));
	}

	function fillInAddress() {
	var place = autocomplete.getPlace();

	for (var component in componentForm) {
	document.getElementById(component).value = '';
	}

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	for (var i = 0; i < place.address_components.length; i++) {
	var addressType = place.address_components[i].types[0];
	if (componentForm[addressType]) {
	var val = place.address_components[i][componentForm[addressType]];
	document.getElementById(addressType).value = val;
	}
	}
	}
	// [END region_fillform]

	// [START region_geolocation]
	// Bias the autocomplete object to the user's geographical location,
	// as supplied by the browser's 'navigator.geolocation' object.
	function geolocate() {

	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());
	});
	}
	}
	// [END region_geolocation]

	</script>

	</head>

	<body onload="initialize()">

	<div id="locationField">
	<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" style="width: 500px;"></input>
	</div>
	<br><br>

	<input id="name" style="width: 205px;"><br>
	<input id="street_number" style="width: 44px;">
	<input id="route" style="width: 150px;"><br>
	<input id="locality" style="width: 150px;">
	<input id="administrative_area_level_1" style="width: 44px;"><br>
	<input id="country">
	<input id="postal_code"><br>
	<br>
	<div id="map_canvas" style="width: 300px; height: 200px;"></div>
	</body>
	</html>