Tech Racho エンジニアの「?」を「!」に。
  • 開発

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>

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

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


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。