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

Answer 1

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 2

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 3

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).

Answer 4

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 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

In my case issue was resolve by changing the Libraries=places to libraries=places it seems to be case sensitive