Google Mapsをサイトに埋め込む、iframeでの引数

Google MapsをWebサイトにiframe埋め込む際に
Google Mapsのサイトでカスタマイズさせてくれるのはサイズと尺度、初期位置くらいです。
せっかく埋め込むのなら色々とカスタマイズしようと思ったのですが
日本語のリファレンスがなかなか見当たりませんでした。
なら自分でまとめてしまえ、という事で動作確認の取れた引数のみ、まとめました。

まず、Google Mapsをサイトに埋め込む方法から。

1、http://maps.google.co.jp/ にアクセスし、住所を検索
2、画面右端の「リンク」をクリック
3、出てきた窓の「埋め込み地図のカスタマイズとレビュー」をクリック

4、枠のサイズを選択、カスタムを選ぶと好きなサイズに出来ます
5、プレビュー画面でズームや位置、地図のタイプ(地図や衛星写真等)を感覚的に決めます。
6、HTMLをコピーし、サイトの埋め込みたい箇所に貼りつける。

これでとりあえず、表示されます。次はカスタマイズの時間です。

※今回は引数を分かりやすくするため、改行してありますが
改行するとエラーが出る可能性があるので、使用時は1行にしてください。

<iframe
    width="600"
    height="350"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="http://maps.google.co.jp/maps?
        <!-- ここから引数 -->
    <!-- 目的別 q → デフォルト  d → 乗換案内(output=embedがない時のみ有効)-->
    f=q&
    <!-- マップ内仕様言語 ja → 日本語  en → 英語-->
    hl=ja&
    <!-- 緑の矢印マーカー座標(URLエンコードで入力すれば日本語も可) -->
    q=35.508591,139.4427722&
    <!-- マップタイプ  m → マップ  k → 衛星写真 p → 地形  e → Google Earth-->
    t=m&
    <!-- オーバービュー表示非表示 0 → 非表示  1 → 表示(output=embedがない時のみ有効) -->
    om=0&
    <!-- URL内に日本語を入れる際の文字コード -->
    ie=UTF8&
    <!-- 出力文字コード -->
    oe=UTF8&
    <!-- 地図中心座標 -->
    ll=35.508191,139.4440022&
    <!-- 尺度(0~23、値が小さいほど縮小する) -->
    z=17&
    <!-- この引数があるとmapのみを枠に埋め込みます -->
    output=embed
"></iframe>

これを実行するとこうなります。

上記以外の引数を発見した方はコメントを残していただけると嬉しいです。

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

渡辺 正毅

1984年生。サンフランシスコ育ち。大学から憧れの日本に留学し、そのまま移住。2006年慶應大学SFC卒。2007年BPS株式会社設立。いい国ですよね。もっとよくしたい。好きになってくれる人を増やしたい。

渡辺 正毅の書いた記事

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ