Google Maps v3 API - 自动完成(地址)

Question

试图让我的谷歌地图应用程序自动完成工作.

这是当前的代码:

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

不幸的是,键入地址时没有任何反应

有任何想法吗？

提前致谢.

编辑:我实际上收到以下错误:

未捕获的TypeError:无法读取未定义的属性"autocomplete"

不知道为什么,代码放在我的map初始化函数中.

编辑2:固定.答案如下.

Answer 1

你的修复也适合我.我正在使用Geocomplete jQuery插件http://ubilabs.github.com/geocomplete/ ,他们主页上的说明说使用这个

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

但它对我没有用,并且得到了同样的错误.

请参阅此处的Google Maps API文档 https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

Answer 2

由于这个问题对我有帮助，我想我会帮助任何在 2019 年遇到此问题的人。在 2019 年，您添加了 google maps api 导入，如下所示：

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

然后添加 &libraries=places 到最后，这样所有的说和做它看起来像这样：

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

Answer 3

固定.自动完成库实际上是一个必须显式加载的独立库.以下行解决了这个问题.

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

Answer 4

如果您使用的是 angular 应用程序：

如果您使用的是谷歌地图，则必须像这样在 ngmodule 中导入 Api

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

使用自动完成模块需要库“places”。

比这样使用它：

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