LoginSignup
13
12

More than 5 years have passed since last update.

Google Maps Platform移行後にウェブページに無課金でGoogleマップを埋め込む方法

Last updated at Posted at 2018-06-22

来る2018年7月16日から提供開始予定のGoogle Maps Platform
技術的な仕様だけでなく、課金(請求)関係のルールにも大きな変更があります。
そんな中、GoogleのサポートやGoogle認定のGoogle Maps API開発パートナー業者の方から情報をいただいて、APIキーを使わない、あるいはAPIキーは必要だけど無課金なGoogleマップの埋め込み方についてまとめました。

APIキーなしで使えるのはGoogleマップ上から取得するコードのみ【APIキー不要・無課金】

APIキーの指定が不要なのは、Googleマップ上で「共有」→「地図を埋め込む」から取得できるiframeコードを使った埋め込みのみ

<iframe 
    width="600" 
    height="450" 
    frameborder="0" 
    style="border:0" 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.132643677959!2d139.71435581557225!3d35.6737357801961!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c9a1923f3f5%3A0xf8fe5cab0f97a8d8!2z5piO5rK756We5a6u6YeO55CD5aC0!5e0!3m2!1sja!2sjp!4v1529571916505" 
    allowfullscreen>
</iframe>

※上記iframeのsrc属性、一部パラメータについては手動で調整も可能ではある模様。
http://blog.8bit.co.jp/?p=14191
(「URLが見慣れない形に」のセクション参照。「Google MAPを住所や建物名で表示」セクションの記述は後述の通り以後使わない方が良いので注意)

パラメータ指定してピンひとつだけ出す(またはピン出さない)ならEmbedAPI【要APIキー/無課金】

Google Maps Embed API
https://developers.google.com/maps/documentation/embed/guide?hl=ja

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

APIキーなしでパラメータ指定する記法は今後は使わない

APIキーを指定せずにパラメータを指定して記述する手法は使うべきでない。いつまでこの記法で表示されるかわからない。

<iframe
    src="https://maps.google.co.jp/maps?output=embed&q=原宿駅">
</iframe>

Googleが公式に提供している記法ではない(「過去に提供していたもの」「そもそも公式に提供してなくて、ユーザーが見つけた記法」などの情報あり)。
https://productforums.google.com/forum/#!topic/maps-ja/f3plFe69Ods;context-place=forum/maps-ja

以上

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12