GoogleMapの埋め込みがちょっと変わったよ

サロンのホームページなどでも、きっとお世話になっているであろうGoogleMap

「ホームページに地図を埋め込みたいけれど、どうしたらいいかわからない」という方もいらっしゃると思います。

今回は、

  • 新しくなったGoogleMapの埋め込み方法について
  • 実際にホームページに埋め込む方法

の2つをご紹介します

 

新しくなったGoogleMapの埋め込み方法について

Googlemap1_1GoogleMapの埋め込みは、これまでは右下の歯車マークからでした。

 

しかし、今回、この部分のメニューが変わったようです。

検索部分の左側に、三本線が表示されています。

ここが、メニューボタンになりました。


スクリーンショット 2015-07-25 7.28.07


メニューを開くと

  • 経路や交通状況
  • 埋め込みや印刷
  • ヘルプ

というカテゴリでメニューが並んでいます

スクリーンショット 2015-07-25 7.42.15

 

実際にホームページに地図を埋め込む

地図を埋め込むには、メニューの中のこちらのリンクをクリックします

スクリーンショット 2015-07-25 7.47.30

すると、

  • リンクを共有
  • 地図を埋め込む

のタブが表示されます

スクリーンショット 2015-07-25 7.47.41

 

地図を埋め込むを選択すると、埋め込み用のタグが出てきます。

スクリーンショット 2015-07-25 7.50.18

全文は、こんな感じになります

このあたりは、基本的には理解する必要はありません。

まるっとコピーしちゃいましょう。

スクリーンショット 2015-07-25 7.51.03

 

それを、ホームページに貼付けますが、注意することが1つ。

ソースコードに貼付ける

例えば、上記のコードをそのまま貼付けると、こうなります。

 

これで、地図を貼付けることができました。

ただ、横幅を一杯にしたい時や、高さをもう少し狭めたい時は、この数値を修正します

width=”600″ height=”450″

 

横幅いっぱいにして、高さは350pxに狭めるときは

width=”100%” height=”350″ 

に修正すれば、このような表示になり、ちょっとすっきりします。

 

サロンのホームページにGoogleMapを埋め込みたい方は、参考にしてみて下さい。

メニューの位置が変わり、「おや?」っと思ったので、シェアさせて頂きました。

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る
こんなブログも読まれています