Javascript/Google Maps Autocomplete

Anvil Q&A
1

What I’m trying to do:
I am trying to add Google Place Autocomplete to a form. (See Place Autocomplete  |  Maps JavaScript API  |  Google Developers)

What I’ve tried and what’s not working:

In Native Libraries I added the following:

<script>
  function addAutocomplete(text_input_DOM) {
    	var autocomplete = new google.maps.places.Autocomplete(text_input_DOM);
}
</script>

On the “show” event handler for the form, I added this code to run after the form is loaded:

    self.call_js('addAutocomplete', anvil.js.get_dom_node(self.address_box))

However, this generated an error that google.maps.places is undefined. From the page source code, it looks like Anvil is loading the Geometry library, but not Places. So I tried adding the following to the Native Libraries file (with my key filled in):

<script src="https://maps.googleapis.com/maps/api/js?key=[MY KEY]&libraries=places"></script>

But then got back the error “You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.” and lots of javascript errors in the console. So it looks like loading the Places library is conflicting with what Anvil loads by default.

Any ideas on what I am doing wrong or how to get this to work?

2 Likes
2

I made a simplified app that just has a single text input and demonstrates the above issue. Check Native libraries to see the javascript code and Form1/address_box_show to see how the javascript is applied to an input text field.

https://anvil.works/build#clone:ZCM4JDN7FUGDAH3L=75T5ZAI5LTJPFZXKF3MTU533

3

Have you tried adding your maps api key following this section of the docs?

Anvil Docs | Maps

4

Yes, thank you for the response. Although I think it would not matter here, because if that was the only issue I would get a quota error from Anvil’s built-in Google Maps API key.

Instead I am getting an error that Anvil is incorporating a Google Maps JavaScript library, but not the one I need. And when I manually incorporate the one I need, it results in errors.

5

You might also try adding defer to your script tag

<script defer src="https://maps.googleapis.com/maps/api/js?key=[MY KEY]&libraries=places"></script>

Bonus - you can also move your function to python


from anvil.js.window import google


class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    google.maps.places.Autocomplete(anvil.js.get_dom_node(self.address_box))
3 Likes
6

Adding the “defer” keyword works! Thanks for the quick response on a Saturday night/Sunday morning. I also deleted the Google API service entirely on the Anvil gui, and that may help avoid conflicts.

Will try moving the javascript code to python in the morning. That will make it easier to keep track of.

1 Like
7

@benny thanks for the example.
I was able to get mine to work as well. But my autocomplete returns the country abbreviation instead of the full country name.

E.g. Manchester, UK instead of Manchester, United Kingdom
I need the complete name. Do you know how to change this.
At the time of writing this I wasn’t able to find a solution

1 Like
8

I have not looked at that. One option would be to take the autocomplete address and send it to the Google Geocode or Places API to get more details, including full country name:

1 Like
9

Thanks @benny that’s all I could think of as well.
this is a handy tutorial that someone shared with me a while ago

1 Like
10

Hi all,
I was able to activate the autocomplete function as suggested in this post.
However, I would like to keep the google maps key as a secret.

Is it possible to pass to the JS code the google maps key without exposing to the client code?

11

This question is old, already has an answer and the subject has nothing to do with your question about keeping the key as a secret.

You will have better chances of getting an answer if you create a new question with the correct subject.

3 Likes