Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@tonpoo

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

More than 1 year has passed since last update.

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

以上

12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonpoo

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?