web-dev-qa-db-ja.com

GoogleスタティックマップAPIがimgタグからの読み込み時に403禁止になる

私が持っているのは、プロパティの場所を示すGoogleマップですが、動的マップを印刷するときに印刷がうまくいかないため、Google Static Map画像APIを実装することにしました。

http://lpoc.co.uk/properties-for-sale/property/oldgate-dairy-st-james-road-long-sutton-cambridgeshire-pe12/?prop-print=1

^^は印刷ビューのプロパティの例であり、静的なマップ画像を表示するはずですが、読み込みに失敗し、インスペクターを見ると、画像に対して403 Forbiden応答が返されます。

しかし、URLに直接アクセスすると、画像が読み込まれます...

何が悪いのですか？

ありがとう

スコット

imageapigoogle-mapsstatic
22
Brady

おっと私はそのようなばかのように感じます。新しいV3 API URLではなく、古いV2マップAPI URLを使用していました。 APIキーを提供せずにV2 URLを使用していたため、403を取得していました:(

3
Brady

これは非常に多くの意見を得ているので、ここに問題の解決策を追加します。

新しいAPIを使用する場合は、ブラウザーアプリ用のキー（リファラー付き）を生成し、パターンがURLと一致することを確認してください。

例えば。 example.comからリクエストする場合、パターンは

  example.com/*

www.example.comからリクエストする場合：

  *.example.com/*

そのため、開発者コンソールでサブドメインが存在するかどうかを確認し、両方のパターンを許可してください。

  1. 開発者コンソール にアクセスします。
  2. APIキーの下で、鉛筆アイコンをクリックして編集します。
  3. [キーの制限]で、example.com/*、*.example.com/*、および必要なローカルテストドメインのエントリがあることを確認します。
17
jcfrei

ここには混乱があるようですが、このスレッドはGoogleで上位にランクされているため、明確にすることは妥当と思われます。

Googleには、マップサービスに使用するいくつかの異なるAPIがあります。

JavaScript API

このAPIの古いバージョンはバージョン2で、キーが必要でした。このバージョンは非推奨であり、新しい バージョン にアップグレードすることをお勧めします。ドキュメントには、「Google Maps API for Business」を使用している場合を除いて、機能するためにはキーが必要であると記載されていることに注意してください。

Static Maps API

これはまったく別の話です。静的マップは、JavaScriptを必要としないサービスです。単にURLを呼び出すと、Googleがマップ画像を返し、URLを<img>タグに直接挿入できるようになります。最新バージョンは バージョン2 であり、これには、使用制限が適用されているため、機能するためにキーが必要です。

ここでキーをリクエストできます： https://code.google.com/apis/console

そして、正しい画像を生成するためのリクエストにキーを追加する必要があります：

http://maps.googleapis.com/maps/api/staticmap?center=New+York,NY&zoom=13&size=600x300&key=API_console_key

これで混乱が解消されることを願っています。

14
Frederik Wordenskjold

私はこれと同じ問題を抱えていましたが、私の解決策は異なっていました。私はV2マップAPIを有効にしましたが、静的マップAPIは有効にしませんでした（これはV2だと思いました）。静的マップAPIを有効にすると、うまくいきました。

4
Jonny White

次の点を100％確認してください：（静的マップの場合）

  1. このURLでプロジェクトを有効にします。

https://console.developers.google.com/apis/api/static_maps_backend/overview?project=

  1. ローカルホスト、ステージング、プロダクションがあります-リファラーセクションでワイルドカードが有効になっているすべてのURL。

  2. Googleはポリシーを変更したため、地図を表示するにはAPIキーが必要です。詳細については、これを参照してください： Google Maps APIキーなし？

それが役に立てば幸い。

3
daksh_019

Staticmaps V3は「Key」属性を必要とせず、それを削除すると<img>ソースの問題。

次のようなURLで試してください：

http://maps.googleapis.com/maps/api/staticmap?center=0.0000,0.0000&zoom=13&size=200x200&maptype=roadmap&markers=0.0000,0.0000&sensor=false

詳細については これを読む 。

2
Carlos Júlio

ええ、Google Maps APIバージョン3はJavaスクリプトバージョンでした。 「Google Static Maps」の最新版は2.0でした。使用制限があるのではないかと思います。

1
Avatar Ng

また、静的マップを表示できず、ブラウザーのネットワークコンソールに403エラーが表示されました。

http応答ヘッダー：

status:403
x-content-type-options:nosniff

多くのGoogle Maps APIが有効になっているAPIキーを持っていましたが、Google Static Maps APIがありませんでした。有効にすると問題が解決しました。

1
PaulH

ここで、リクエストに追加する必要がある 'signature'パラメータを使用する必要があります。そうしないと、静的マップは機能しません。ここにいくつかの便利なリンクがあります

1） 署名の生成方法

2） BE側で署名を作成する方法（コードスニペット）

1
andrey

私はWordpress 4.9.4をChurchThemes Exodusテーマで使用しています。新しいAPI_KEYを申請して生成しました。

完了すると、マップがサイトまたはアプリに表示されるようになります。

更新時に表示されない場合は、次のことを行う必要があります。

  • キャッシュをクリアします（WordpressまたはDrupal webistes）、
  • aPIが有効なAPIを登録するために推奨される5分間待機します
0
drupalDayz