https://www.bragghomeservices.com/common/usc/p/google-address-lookup.js

1if ( !window.USC ) { window.USC = {}; }
2const reqs = ['usc/p/utils'];
3if (!window.google?.maps) reqs.push('googlemap');
4require2(reqs, function () {
5
6	/**
7	 * Create the googleAddressLookup control.
8	 * 
9	 * @param {HTMLElement} el 
10	 */
11	function googleAddressLookup( el ) {
12
13		// Grab the elements
14		this.els = {
15			form: el,
16			search: el.querySelector( 'input[data-ga-search]' )
17		}
18
19		this.els.inputs = {};
20		var targets = Array.from( this.els.form.querySelectorAll( "[data-ga-target]" ) );
21		for ( var i = 0; i < targets.length; i++ ) {
22			var input = targets[i],
23				field = input.getAttribute( 'data-ga-target' );
24			this.els.inputs[field] = input;
25		}
26
27		// Set the options using the search input.
28		var data = USC.elementData( this.els.search );
29		this.options = Object.assign( {}, {}, data );
30
31		// Bind these methods to this instance.
32		this.setupSearch = setupSearch.bind( this );
33
34		// Get the search going.
35		this.setupSearch();
36
37	}
38
39	/**
40	 * Set up and run the search.
41	 * 
42	 * @param {Event} e 
43	 */
44	function setupSearch( e ) {
45
46		// Create the Places Control.
47		var fullAddress = this.places = new google.maps.places.Autocomplete( this.els.search, this.options );
48		var that = this;
49
50		// Listen for the search to be ran
51		google.maps.event.addListener( fullAddress, 'place_changed', function () {
52			var selectedPlace = fullAddress.getPlace();
53			var fieldComponent;
54			var secondaryFieldComponent;
55			var latitude;
56			var longitude;
57
58			var data = {
59				fullAddress: fullAddress
60			};
61
62			if ( !selectedPlace.geometry ) {
63				// No data available.
64				return;
65			}
66
67			// Run on all the inputs
68			var inputs = Object.keys( that.els.inputs );
69			for ( var i = 0; i < inputs.length; i++ ) {
70				var gaTarget, datainput,
71					field = inputs[i],
72					datainput = that.els.inputs[field],
73					gaTarget = datainput.getAttribute( 'data-ga-target' );
74
75				if ( gaTarget == 'zipcode' ) {
76
77					// Find zip value
78					fieldComponent = selectedPlace.address_components.find( function ( address ) {
79						return address.types.indexOf( 'postal_code' ) !== -1;
80					} );
81
82					datainput.value = ( fieldComponent && fieldComponent.short_name ) || "";
83
84				} else if ( gaTarget == 'address' ) {
85
86					// Find Street value
87					fieldComponent = selectedPlace.address_components.find( function ( address ) {
88						return address.types.indexOf( 'route' ) !== -1;
89					} );
90
91					secondaryFieldComponent = selectedPlace.address_components.find( function ( address ) {
92						return address.types.indexOf( 'street_number' ) !== -1;
93					} );
94
95                    if ( secondaryFieldComponent ) {
96                        datainput.value = secondaryFieldComponent.short_name;
97                    }
98					
99                    if ( fieldComponent ) {
100                        ( secondaryFieldComponent ) ? datainput.value += " " + fieldComponent.long_name : datainput.value = fieldComponent.long_name;
101                    }
102
103				} else if ( gaTarget == 'city' ) {
104
105					// Find City value
106					fieldComponent = selectedPlace.address_components.find( function ( address ) {
107						return address.types.indexOf( 'locality' ) !== -1;
108					} );
109
110					if ( !fieldComponent ) {
111						// if no city, check for sublocality
112						fieldComponent = selectedPlace.address_components.find( function ( address ) {
113							return address.types.indexOf( 'sublocality' ) !== -1;
114						} );
115					}
116
117					if ( !fieldComponent ) {
118						// if no city, check for neighborhood
119						fieldComponent = selectedPlace.address_components.find( function ( address ) {
120							return address.types.indexOf( 'neighborhood' ) !== -1;
121						} );
122					}
123
124					if (!fieldComponent) {
125						// if no neighborhood, check for a township 
126						fieldComponent = selectedPlace.address_components.find(function (address) {
127							return address.types.indexOf('administrative_area_level_3') !== -1;
128						});
129					}
130
131                    if ( fieldComponent ) {
132                        datainput.value = fieldComponent.long_name;
133                    }
134					
135				} else if ( gaTarget == 'state' ) {
136
137					// Find State value
138					fieldComponent = selectedPlace.address_components.find( function ( address ) {
139						return address.types.indexOf( 'administrative_area_level_1' ) !== -1;
140					} );
141
142					datainput.value = fieldComponent.short_name;
143
144				} else if ( gaTarget == 'googleaddress' ) {
145
146					datainput.checked = true;
147					datainput.trigger( 'change' );
148
149				} else {
150					return;
151				}
152			} 
153
154
155		} );
156		

157	}
158
159	/**
160	 * Public googleAddressLookup creation.
161	 * 
162	 * @param {any} el
163	 */
164	window.USC.googleAddressLookup = function ( el ) {
165		if ( !( el instanceof HTMLElement ) ) {
166			throw new Error( "Need an HTMLElement to initialize a googleAddressLookup." )
167		} else if ( el.$googleAddressLookup ) {
168			console.log( "googleAddressLookup already initialized." );
169			return;
170		} else {
171			el.$googleAddressLookup = new googleAddressLookup( el );
172		}
173	};
174
175	if ( window.register ) {
176		window.register( 'usc/p/google-address-lookup' );
177	}
178
179} );