Breaking News: Grepper is joining You.com. Read the official announcement!

google places auto-complete

Crowded Crane answered on September 27, 2021 Popularity 9/10 Helpfulness 2/10

answer google places auto-complete

related google places autocomplete

google places auto-complete

Comment

npm install ngx-google-places-autocomplete

Popularity 9/10 Helpfulness 2/10 Language typescript

Source: www.npmjs.com

Tags: google-places typescript

Link to this answer
Share Copy Link

Contributed on Sep 27 2021

Crowded Crane

0 Answers Avg Quality 2/10

Closely Related Answers

google places autocomplete

Comment

	let autocomplete;
    let address1Field;
    let address2Field;
    let postalField;

    function initAutocomplete() {
		address1Field = document.querySelector("#line_1");
		address2Field = document.querySelector("#line_2");
		postalField = document.querySelector("#postcode");
		// Create the autocomplete object, restricting the search predictions to
		// addresses in the US and Canada.
		autocomplete = new google.maps.places.Autocomplete(postalField, {
			componentRestrictions: { country: ["gb", "ie"] },
			fields: ["address_components"],
			types: ["postal_code"],
		});
		
		address1Field.focus();
		// When the user selects an address from the drop-down, populate the
		// address fields in the form.
		autocomplete.addListener("place_changed", fillInAddress);
    }

    function fillInAddress() {
		// Get the place details from the autocomplete object.
		const place = autocomplete.getPlace();
		console.log(JSON.stringify(place));
		let address1 = "";
		let postcode = "";

		// Get each component of the address from the place details,
		// and then fill-in the corresponding field on the form.
		// place.address_components are google.maps.GeocoderAddressComponent objects
		// which are documented at http://goo.gle/3l5i5Mr
		for (const component of place.address_components) {
			// @ts-ignore remove once typings fixed
			const componentType = component.types[0];

		switch (componentType) {
			case "street_number": {
				address1 = `${component.long_name} ${address1}`;
				break;
			}

			case "route": {
				address1 += component.long_name;
				break;
			}
			case "postal_town": {
				postal_town = component.long_name;
				document.querySelector("#town_or_city").value = component.long_name;
				break;
			}
		
			case "administrative_area_level_1": {
				document.querySelector("#country").value = component.long_name;
				break;
			}
			case "postal_code": {
				postcode = component.long_name;
				break;
			}
		}
    }
	console.log(JSON.stringify(address1));
	console.log(JSON.stringify(postcode));
    address1Field.value = address1;
    postalField.value = postcode;
    // After filling the form with address components from the Autocomplete
    // prediction, set cursor focus on the second address line to encourage
    // entry of subpremise information such as apartment, unit, or floor number.
    address2Field.focus();
    }

    window.initAutocomplete = initAutocomplete;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: autocomplete autocomple

Link to this answer
Share Copy Link

Contributed on Jan 12 2024

its_me_dev

0 Answers Avg Quality 2/10

google places auto-complete

Contents

More Related Answers

google places auto-complete

Closely Related Answers

google places autocomplete

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.