GoogleMap(グーグルマップ)

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 => 中国語繁
など

 



WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

  2. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

  3. JavaScript

    Javascript

    Javascriptで画像サイズを取得したい

    &lt;img src="sample.jp" alt="サンプル" …

  4. JavaScript

    Javascript

    画像 右クリックでのダウンロードは禁止!!

    普段物件画像を取り扱うシステムを構築することが多いんですが、不動産…

  5. JavaScript

    Javascript

    zoomi.jsでオンマウス時に画像を拡大

    画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼…

  6. JavaScript

    Javascript

    Javascript おすすめのデートピッカー(日付選択ライブラリー)

    WEB制作の仕事をしていると、お客さんからの依頼でデートピッカ…

最近の記事

  1. Technology-Connection-Net
  2. ドメインにハイフンを使うのは日本人だけ?
  3. SSL(HTTPS)
  4. ドメインについて
  5. WP:WordPress(ワードプレス)
  6. ドメイン(domain)
  7. JPドメイン
  8. 高速(スピード)
  9. ブログアクセス
  10. 高速(スピード)
PAGE TOP