Google Places Autocomplete Framework7

[mebeingken]

Here is a working setup to use the Google Places APi for an autocomplete input using framework7.

In the Google console API’s, enable both “Places API” and “Maps Javascript API”

In Google API Credentials add an API key and restrict to these two apis:

In your Wappler html page, add fw7 as usual.

Add the following using your key from Google:

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&callback=initAutoComplete&libraries=places" defer></script>

Add the following script. The only modification you need is to change the id of your input (my example uses inp_location

	<script>

		window.initAutoComplete = function() {
  		var acInputs = document.getElementById("inp_location");
  		var autocomplete = new google.maps.places.Autocomplete(acInputs);
  		google.maps.event.addListener(autocomplete, 'place_changed', function() {});
	}

	</script>

Add the following to css

.pac-container{ z-index: 20000; }

And create your input:

					<div class="list">
						<ul>
							<li>
								<div class="item-content item-input">
									<div class="item-inner">
										<div class="item-title item-label">Location</div>
										<div class="item-input-wrap">
											<input type="text" name="name" id="inp_location" placeholder="Choose your location">
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>

Android

iOS

and browser

[mgaussie]

Thanks for this @mebeingken . I’ve had to do something similar for a web app project, as Wapplers AutoCompelte isn’t working with Google autocomplete.

Wondering how you returned value’s to use within Wappler workflows from this integration? Some additional custom code?

[mebeingken]

Sorry, on vacation right now but if your still stuck next week, Ping me again!

[George]

Btw now that we are well on the mobile track we will also get a google autocomplete for places as app connect component.

So stay tuned!

[mgaussie]

@George thank you! Can you give an ETA for this please? This is core to our onboarding - and so will need to get an external dev to custom build this - if this is only a few days away then I’ll just wait for you guys, as that would be my preference. If it’s 2/3 weeks away I’ll need to go custom route to go to prod.

[George]

Next week, we actually got the component almost ready but got a bit side tracked with the tons of mobile improvements

[mgaussie]

You are a team of Rockstars. Ok, I’ll workaround until this is ready! Thank you.

[mgaussie]

@George I don’t know what your plans are in terms of full functionality - but it would be super, super useful if we could return not only just the ‘places_id’ from the autocomplete, but also be able to choose the ‘type’ of location we display in the autocomplete, and importantly (and selfishly for my project) - the actual ID from the City, State, Country, Town or Region.

Getting the ID’s is super useful for mapping within a database. If you have a working version prior to Thursday, I’d also be very happy to be your guinea pig and test it out

[mrbdrm]

Doesn’t this will need a second call to google? or one call have all the information?
google is way too expensive

[Anumol_K_Joseph]

Hello, I had implemented this code on my ios application code is working fine. But there is an issue on clicking location, while clicking it is not appending in my text field sometimes. Is there any suggestion regarding it? My phone is iPhone-SE.