GoogleマップをWebサイトに埋め込んでみよう！
ご無沙汰しております。
ホームページなど制作担当のダーヤマこと山田です。
基本的にアイスは氷菓派です。
今日はGoogleマップをブログなりホームページに埋め込むためのハウツーものです。
まずはきほんから
基本的なことはGoogle公式の地図を埋め込む – マップ ヘルプをご覧ください。
つまるところ、埋め込みまでの流れをかんたんにいうと、
- Googleマップで表示させたい場所を検索する。
- 埋め込み用コードをWebサイトに貼り付ける。
以上です。簡単でしょ？
プラグインを使う必要も、JavaScriptを使う必要もないんです！イインダヨ！
とりあえず埋め込んでみよう
下板橋駅をGoogleマップで検索してみます。
左上にあるメニューを開いてみます。
真ん中くらいにある「地図を共有または埋め込む」を選択します。
ダイアログが出てくるので、今回は「地図を埋め込む」を選択します。
これでひとまず無事に下のような埋め込み用コードを取得することができました。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d763.2350020394157!2d139.71493160522053!3d35.74549434675726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60189299083b3d01%3A0x37ccb5dedd6dfbaa!2z5LiL5p2_5qmL6aeF!5e0!3m2!1sja!2sjp!4v1437696955601" width="400" height="300" frameborder="0" style="border:0" allowfullscreen> </iframe>
実際にここで取得したコードで地図を埋め込むとこんなかんじになります。↓
埋め込み用コード自体は割と短めのコードなのですが、実際にはインラインフレームでGoogleマップを呼び出しておるので、中身を覗いてみると…
ヒエッ…
難しいことは考えず、便利に使わせてもらいましょう。
ちょっと応用してみよう
取り急ぎ埋め込むことには成功しましたが、現場ではなかなかどうにもこのまま埋め込んで終了とはいきませんね。アクセスマップとして大きく表示させたい、サイドバーに割と小さく拡大させて表示させたい、お店までの道案内も表示させたい…人類の欲望はとどまることを知りません。
しかし、そこは天下のGoogle、エンドユーザー向けにしっかりとさまざまなオプションを用意してくれています。
iframeで使用できるオプション
まずは最重要なiframe自体のサイズ変更ですが、これはwidth/heightを変更すればそのまま反映されます。
<iframe src="..." width="50" height="50"...> </iframe>
全く使い物になりませんね。
あまりサイズを小さくしすぎることのないように注意しましょう。
また、デフォルトで吐き出されるiframeのsrcに追加で引数を指定することでいろいろと好みの地図になってくれます。
ただし、オプションを使う際には、デフォルトのsrcを少し変更して、
<iframe src="https://www.google.com/maps/embed?...>
から
<iframe src="https://www.google.com/maps?output=embed&...>
とする必要があります。
引数にもいろいろあるのですが、とくに重要そうなものを以下にまとめておきました。
| 引数 | 値 | 結果(例) |
|---|---|---|
| q | 検索クエリ | 地図の中心を指定する q=下板橋駅  |
| t | m(デフォルト) k |
通常/航空写真を切り替える t=k  |
| z | 12(デフォルト) 0〜22の整数 |
拡大率を変更する z=20  |
| saddr daddr |
検索クエリ | ルート表示 saddr：出発地 daddr：目的地 saddr=上板橋&daddr=下板橋  |
実際に使用するときには
src="https://www.google.com/maps?output=embed&q=下板橋駅&t=k&z=18
のように「＆」で引数をつなげて使用します。
まとめ
つい最近まではくしゃくしゃの藁半紙に手描きで地図を描いていたものですが、昨今の技術革新のおかげですっかりそんな必要もなくなりましたね。
スマートフォンの普及に伴い地図アプリの利用率はこれからも右肩上がりとなることは火を見るよりも明らかですので、この機会にしっかりとWebサイトへの地図の埋め込みをマスターしましょう！
