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

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

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

  2. JavaScript

    Javascript

    「REQUEST_DENIED」というエラーコード...

    GoogleMap APIを利用してマップ表示させたいのですが、&…

  3. JavaScript

    Javascript

    Google マップのストリートビューを実装してみました!!

    Google マップのストリートビューを実装してみました。&nbs…

  4. JavaScript

    Javascript

    Geolocation APIで位置情報を取得して、Yahoo!地図を表示

    Geolocation APIを使って位置情報を取得して、Yaho…

  5. JavaScript

    Javascript

    ajaxzip2からajaxzip3へ変えてみました!!

    弊社で日頃からお世話になっているライブラリーといえば、ajaxzi…

  6. JavaScript

    Javascript

    Yahoo!地図のWeb APIを使ってみました!!

    弊社では今までGoogleMapしか使ってこなかったのですが、使用…

最近の記事

  1. PHP(ピー・エイチ・ピー)
  2. PHP(ピー・エイチ・ピー)
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. Security(セキュリティ)
  7. WP:WordPress(ワードプレス)
  8. WP:WordPress(ワードプレス)
  9. WP:WordPress(ワードプレス)
  10. アフィリエイト
PAGE TOP