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

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安で提供しております。

  • 個人でWordPressを使ったサイト構築をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

  2. JavaScript

    Javascript

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

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

  3. JavaScript

    Javascript

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

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

  4. JavaScript

    Javascript

    videoタグを使用する際には、html5mediaもご一緒に!!

    動画をサイト上に載せる場合、HTML5でのコーディングがメインにな…

  5. JavaScript

    Javascript

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

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

  6. JavaScript

    Javascript

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

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

最近の記事

  1. WordPress(WP)
  2. 404 Not Found
  3. WordPress(WP)
  4. WordPress(WP)
  5. PHP
  6. PHP
  7. 風邪予防
  8. WordPress(WP)
  9. PHP
  10. 宅建
PAGE TOP