web-dev-qa-db-ja.com

Google Maps v3 API-オートコンプリート（アドレス）

Googleマップアプリケーションでオートコンプリートを機能させようとしています。

現在のコードは次のとおりです。

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'を読み取ることができません

理由はわかりませんが、コードはマップ初期化関数に配置されます。

編集2：修正されました。以下に答えてください。

javascriptgoogle-mapsgoogle-maps-api-3autocomplete
42
Matt

一定。オートコンプリートライブラリは、実際には別個のライブラリであり、明示的にロードする必要があります。次の行で問題を解決しました。

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

あなたの修正も私のために働いた。私は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

19
Hung Luu

angular app：

Googleマップを使用している場合は、次のように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: [...]
})

オートコンプリートモジュールを使用するには、ライブラリ「場所」が必要です。

次のように使用するより：

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

答えてくれてありがとう。どういうわけか、type="text/javascript"を使用する場合は、<script>タグのlibraries=places属性を省略しないことが重要と思われます。

動作しません：

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

作品：

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

コールバックバリアントも機能します（initMap関数が定義されている場合）。

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

これは別の SO回答 と一貫性があり、 公式ドキュメント と矛盾しているようです（URLにkeyを指定すると違いが生じます）。

0
davke

aPIキーがこのAPIの1日のリクエストクォータを超えているため、このエラーが見つかりました。

新しいAPIキーを作成し、古いキーの代わりに置き換えます。

わたしにはできる

ありがとうございました

0
vinayak surywanshi

次のように、スクリプト属性に「defer async」を追加する必要があります。

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

この質問は私を助けたので、私は2019年にこの問題を抱えている人を助けるだろうと考えました。2019年にあなたはこのようなGoogleマップ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>
0
Caleb