web-dev-qa-db-ja.com

npmを介してGoogleマップをインストールする方法は？

Googleマップ用のnpmで利用可能なパッケージはありますか？または私は本当にこれを貼り付けることになっています

<script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY">
</script>

私のindex.htmlに、更新ごとにこのjsファイルをダウンロードしますか？

ときどきReferenceError: google is not defined。

javascriptnpmmaps
13
feerlay

公式のGoogleマップnpmパッケージ @ google/maps がこれを行います。で使用できます

var googleMapsClient = require('@google/maps').createClient({
  key: 'your API key here'
});

ただし、上記のスクリプトを使用しても、スクリプトは2回ダウンロードされません。多くのブラウザはjavascriptファイルをキャッシュするため、https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEYは数回ダウンロードして停止します。browserifyでgoogleマップモジュールを使用しても何も変わりません。

6
pfg

はい、いくつかのパッケージがあります。これを試してみることができます。

npm-Googleマップ

1
SomeRandomGuy

React + TypeScriptで作業しているときに同じ問題に遭遇しました。

npm install @google/maps

しかし、TypeScriptコンパイラはエラーを出し、インストールするためのこの行も提供してくれました。

npm install @types/google__maps

そしてそれは働いた。

import { createClient } from "@google/maps"

const googleMaps = createClient({
  key: "YOUR_API_KEY"
})
1
Serhan C.

ライブラリを適切な方法で呼び出していないため、ReferenceErrorが表示されている可能性があります。

Googleのドキュメント では、APIの読み込みが完了したときに呼び出されるコールバック（initMapなど）を指定することを推奨しています。 APIがロードされ、googleがすでに定義されていることを確認するために、Mapで行う必要のあることはすべて、その関数内で行う必要があります。

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