Google Maps v3 API - Auto Complete (address)

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", () => { ...

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>

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


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>