閉じる
閉じる

あまめも

[甘]たったこれだけ?!サイトに「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. [甘]TwitterCardsを「Twitter Cards M…

  2. take022-line-thumbnail

    【YouTube更新】知ってました?LINEで簡単!画像処理

  3. take029-preview-thumbnail

    【WaznFilm更新】アプリのインストール不要!Macで簡単に…

  4. se-info

    「この音源効果音として使いたい!」”FinalCutPro”で音…

  5. [甘]WPでセキュリティ強化!「SiteGuard WP Plu…

  6. take021-thumbnail

    【YouTube更新】秒で解決!スマホの画面を動画でキャプチャす…

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

  1. 三重限定 松坂牛 せんべい

Twitter

ページ上部へ戻る