Google Map インラインフレームでの読み込み

Javascript

Google Map APIを使うのは止めました!

Google Map(グーグル マップ)は、APIキー無し、無料で使用する

Google Maps APIを使ってGoogle Map(グーグル マップ)を表示させている方も多いと思います。

最近、という訳でもないですが、料金体系が変わりましたね。

ただ、月200USドルまでであれば無料で使えるとのことだったので、
まあ、大丈夫だろうと考えていたのですが、
想定以上にアクセスが増えたサイトがあり、とうとう料金が発生しました。
Google Cloud API 料金

で、この機会に、
もうGoogle Maps APIを使うのは止めました!

それで、グーグルマップはインラインフレーム(iframe)で読み込むようにしました。
この方法だと、APIキーは不要です。勿論、課金も発生しません。

やりたいことによっては、APIキーを設定しないと実現できない場合もありますが、
仕様を見直すことで、使わない方向にもっていくことも可能です。

例えば、マップ上に複数のマーカー(ピン)を立てたい場合には、APIを使わないと対応できません。
でも、本当に複数のマーカーを立てる必要はありますか?
地図を複数に分けて埋め込むような仕様にはできませんか?
と、見直すことは出来ると思います。

それでも、仕様を見直すことが出来ない場合には仕方ないですが、
極力、APIを使わずに設定できるようにしましょう。

 

インラインフレーム(iframe)での埋め込み方法

インラインフレームでの埋め込みは、
https://maps.google.co.jp/maps?output=embed
を使用します。

Google Mapの埋め込み方法

例えば、都庁の地図を埋め込む場合には、以下のURLを埋め込みます。
https://maps.google.co.jp/maps?output=embed&t=m&z=18&ll=35.689634,139.692101
ll」で地図の中心座標を設定します。

インラインフレームと合わせると、以下の様なHTMLになります。

<iframe src="https://maps.google.co.jp/maps?output=embed&t=m&hl=ja&z=18&ll=35.689634,139.692101" frameborder="0" scrolling="no" width="auto"></iframe>

表示は以下の様になります。

 

Google Mapにマーカー(ピン)を立てる

マーカー(ピン)を立てる場合には、「q」というパラメータを使用します。

<iframe src="https://maps.google.co.jp/maps?output=embed&t=m&hl=ja&z=18&ll=35.689634,139.692101&q=35.689634,139.692101" frameborder="0" scrolling="no" width="auto"></iframe>

表示は以下の様になります。

 

使用できるパラメータ

埋め込み時に使用できるパラメータをまとめておきます。

パラメータ内容使用例設置可能な値
ll地図の中心点ll=35.689634,139.692101
q文字列検索q=東京駅住所、施設名などを指定
q緯度経度q=35.689634,139.692101緯度と経度をカンマ(,)区切りで指定
z縮尺z=180~23
t表示モードt=mm => 地図
k => 航空写真
h => 地図 + 航空写真
p => 地形図
e => Google Earth
hl言語hl=jaja => 日本語
us => 英語
zh-CN => 中国語簡
zh-TW => 中国語繁
など

関連記事

  1. JavaScript

    Javascript

    jQueryのプラグイン「jCanvas」で間取図を作成

    HTML5のCanvasを使ってやりたい事があったので、本日はjQ…

  2. JavaScript

    Javascript

    Yahoo!地図にコントロール追加

    Web APIを使って、Yahoo!地図にいくつかのコントロールを…

  3. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

  4. JavaScript

    Javascript

    Google Static Maps API V1の終了

    かなり前に組んだガラケーサイトでGoogle Mapを表示させていたの…

  5. JavaScript

    Javascript

    「jQuery ui Datepicker」のオプション

    前回の記事では、「jQuery ui Datepicker」の設定…

  6. JavaScript

    Javascript

    jQuery - $("select") / $('select[name="name属性"]')

    本日ですが、セレクトボックス(プルダウン)を一括で操作したくて、…

最近の記事

  1. JavaScript
  2. バージョンアップ
  3. JavaScript
  4. セキュリティー
  5. JavaScript
PAGE TOP