Google Maps v3 API - Auto Complete (address)

Question

Attempting to get auto complete working for my google maps application.

Here is the current code:

HTML

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">

Javascript

    var input = document.getElementById('address');
    var options = {
        componentRestrictions: {country: 'au'}
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);

Unfortunately nothing happens when typing an address.

Any ideas?

Thanks in advance.

Edit: I'm actually receiving the following error:

Uncaught TypeError: Cannot read property 'autocomplete' of undefined

Not sure why, the code is placed in my map initialize function.

Edit 2: Fixed. Answer below.

Answer 1

You have to add 'defer async' to the script attribute, like this:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
            async defer></script>

Answer 2

Fixed. The autocomplete library is actually a separate library that must be explicitly loaded. The following line solved the problem.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places‌​&sensor=false"></scr‌​ipt>

Answer 3

Since this question helped me I figured I would help anyonewho is having this problem in 2019. In 2019 you add the google maps api import like this:

https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY

Then add &libraries=places to the end so that all said and done it looks like this:

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&libraries=places">
</script>

Answer 4

Your fix worked for me too. I'm using the Geocomplete jQuery Plug-in http://ubilabs.github.com/geocomplete/ and the instructions on their home page says to use this

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>

But it didn't work for me and was getting the same error.

See documentation for Google Maps API here https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

Answer 5

if you are using angular app:

If you are using google maps you have to import the Api in the ngmodule like this

@NgModule({
  declarations: [...],
  imports: [...,
    AgmCoreModule.forRoot({
      clientId: '<mandatory>',
      //apiVersion: 'xxx', // optional
      //channel: 'yyy', // optional
      //apiKey: 'zzz', // optional
      language: 'en',
      libraries: ['geometry', 'places']
    })
  ],
  providers: [...],
  bootstrap: [...]
})

the library 'places' is needed to use the autocomplete module.

Than use it like this:

import {MapsAPILoader} from "@agm/core";
...
constructor(private mapsAPILoader: MapsAPILoader,
...
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new window['google'].maps.places.Autocomplete(..., ...);

      autocomplete.addListener("place_changed", () => { ...

Answer 6

Thanks Matt for the answer! Somehow it seems to be important not to omit type="text/javascript" attribute on <script> tag when using libraries=places.

Doesn't work:

<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false&callback=initMap"></script>
<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false"></script>

Works:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

Callback variant also works (with initMap function defined):

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&callback=initMap"></script>

This seems to be consistent with another SO answer and inconsistent with the official documentation (unless providing the key in the url makes the difference).