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"></script>
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&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>