あまめも

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

良くお店の紹介とかをしている時に「マップ埋め込んだ方が親切だよな〜」とか思ってました。
調べたら簡単に埋め込めたんでその紹介です。

「Google Map」を開く

まずは、載せる地図を見ないとイメージ湧かないので「Google Map」を開いてみる。
サイトに飛ぶと

20140404_map_001

こんな感じの画面が出ると思います。
検索は左上のボックスにキーワードを入力。

※1は後ほど説明
※2はGoogleアカウントを持っている時はログインすると地図を自分好みにカスタマイズできるのでオススメです。

早速目的地を検索

「住所」でも「電話番号」でも「お店の名前」でも良いので、とにかく目的地の情報を入力!
今回は「OpenKitchen然」を検索。
検索でヒットすると

20150404_map_002

こんな感じに表示されます。
この状態を「自分のサイトに埋め込みたい!」ってときは、画面右下の歯車マークをクリック!

地図をサイトに埋め込む準備?

歯車マークをクリックすると、

20150404_map_003

ダイアログが表示されるので「地図を共有または埋め込む」をクリック!

20150404_map_004

「地図を埋め込む」を選択。

20150404_map_005

こんな感じです。
地図の大きさは

  • 小:400×300
  • 中:600×450
  • 大:800×600
  • カスタムサイズ:好きな大きさ

の4パターンから選択可能(2015/04/04現在)。
今回は「小」を選択。

サイズ選択画面の右にあるコードをコピーして自分のサイトに貼り付けるだけで埋め込み完了です。

実際に埋め込んでみると

こんな感じです。

まとめ

めっちゃ簡単にサイトに埋め込めました。
普通に埋め込むだけならこれで十分だと思います。

ただ、ど〜しても表示にこだわりたいのでそのうち「css」でカスタムしようと思ってます!
ウェブ系やった事無いから苦労しそうだけど、これも良い勉強。
「人生常に勉強!」の精神でがんばろ〜。

関連記事

  1. [甘]iTunesでアルバムアートワーク(ジャケット写真)の表示…

  2. [甘]Macで隠しファイルを表示するには?

  3. ず〜と気になってたHPの文字をマーカー(蛍光ペン)でなぞった感じ…

  4. Macをマウスなしで操作したい!!って時のショートカット抜粋

  5. [甘]Macの画面キャプチャ(プリントスクリーン)の仕方いろいろ…

  6. [甘]知らなかった!『Evernote』で”過去ログ”を参照する…

こんなメモもありますよ♪

Twitter

ページ上部へ戻る