[甘]たったこれだけ?!サイトに「Google マップ」を埋め込む方法。

良くお店の紹介とかをしている時に「マップ埋め込んだ方が親切だよな〜」とか思ってました。
調べたら簡単に埋め込めたんでその紹介です。
「Google Map」を開く
まずは、載せる地図を見ないとイメージ湧かないので「Google Map」を開いてみる。
サイトに飛ぶと
こんな感じの画面が出ると思います。
検索は左上のボックスにキーワードを入力。
※1は後ほど説明
※2はGoogleアカウントを持っている時はログインすると地図を自分好みにカスタマイズできるのでオススメです。
早速目的地を検索
「住所」でも「電話番号」でも「お店の名前」でも良いので、とにかく目的地の情報を入力!
今回は「OpenKitchen然」を検索。
検索でヒットすると
こんな感じに表示されます。
この状態を「自分のサイトに埋め込みたい!」ってときは、画面右下の歯車マークをクリック!
地図をサイトに埋め込む準備?
歯車マークをクリックすると、
ダイアログが表示されるので「地図を共有または埋め込む」をクリック!
「地図を埋め込む」を選択。
こんな感じです。
地図の大きさは
- 小:400×300
- 中:600×450
- 大:800×600
- カスタムサイズ:好きな大きさ
の4パターンから選択可能(2015/04/04現在)。
今回は「小」を選択。
サイズ選択画面の右にあるコードをコピーして自分のサイトに貼り付けるだけで埋め込み完了です。
実際に埋め込んでみると
こんな感じです。
まとめ
めっちゃ簡単にサイトに埋め込めました。
普通に埋め込むだけならこれで十分だと思います。
ただ、ど〜しても表示にこだわりたいのでそのうち「css」でカスタムしようと思ってます!
ウェブ系やった事無いから苦労しそうだけど、これも良い勉強。
「人生常に勉強!」の精神でがんばろ〜。