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:修正されました。以下に答えてください。
一定。オートコンプリートライブラリは、実際には別個のライブラリであり、明示的にロードする必要があります。次の行で問題を解決しました。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
あなたの修正も私のために働いた。私はGeocomplete jQueryプラグインを使用しています http://ubilabs.github.com/geocomplete/ と彼らのホームページの指示はこれを使用するように言っています
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
しかし、それは私にとってはうまくいかず、同じエラーが発生していました。
ここでGoogle Maps APIのドキュメントを参照してください https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library
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", () => { ...
答えてくれてありがとう。どういうわけか、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
を指定すると違いが生じます)。
aPIキーがこのAPIの1日のリクエストクォータを超えているため、このエラーが見つかりました。
新しいAPIキーを作成し、古いキーの代わりに置き換えます。
わたしにはできる
ありがとうございました
次のように、スクリプト属性に「defer async」を追加する必要があります。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
この質問は私を助けたので、私は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>