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

autocomplete jqiery google places api

Add Answer

Weary Wildebeest answered on May 5, 2021 Popularity 9/10 Helpfulness 2/10

answer autocomplete jqiery google places api

related google maps places autocomplete api

related google search autocomplete api example

related google places autocomplete

autocomplete jqiery google places api

Comment

AUTO

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: stackoverflow.com

Tags: autocomplete google-places-api whatever

Link to this answer
Share Copy Link

Contributed on Feb 08 2023

Weary Wildebeest

0 Answers Avg Quality 2/10

Closely Related Answers

google maps places autocomplete api

Comments(1)

<input type="text"required id="autocomplete">
<script>
function initAutocomplete() {
   new google.maps.places.Autocomplete(
          (document.getElementById('autocomplete')),
          {types: ['geocode']}
   );
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initAutocomplete"
                async defer></script>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: api

Link to this answer
Share Copy Link

Contributed on May 05 2021

VasteMonde

0 Answers Avg Quality 2/10

google search autocomplete api example

Comment

<div id="output"></div>

<script>
/* this function shows the raw data */
function myAmazingFunction(data){
    document.getElementById('output').innerHTML = data;
}
</script>

<script src="https://www.google.com/complete/search?client=hp&hl=en&sugexp=msedr&gs_rn=62&gs_ri=hp&cp=1&gs_id=9c&q=a&xhr=t&callback=hello&callback=myAmazingFunction"></script>

Popularity 10/10 Helpfulness 3/10 Language html

Source: stackoverflow.com

Tags: api

Link to this answer
Share Copy Link

Contributed on Feb 21 2022

Strange Scarab

0 Answers Avg Quality 2/10

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 1/10 Language javascript

Source: Grepper

Tags: autocomplete autocomple

Link to this answer
Share Copy Link

Contributed on Jan 12 2024

Angry Armadillo

0 Answers Avg Quality 2/10

autocomplete jqiery google places api

Contents

More Related Answers

autocomplete jqiery google places api

Closely Related Answers

google maps places autocomplete api

google search autocomplete api example

google places autocomplete

Grepper

Documentation

Social

Legal

Contact

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