ぽぽイズム

4歳と2歳を育てる専業主婦です。育児のことや日常のことを気ままに書いていきます。チョコをこよなく愛するアラサー。

はてなブログにGoogleマップを埋め込む方法 簡単すぎてビックリ!

こんにちは!ぽぽやんです。

 

先日アップした記事の中に、初めてGoogleマップを埋め込んでみました。

www.popoyan-blog.com

 

こうしたおでかけスポット紹介には、やっぱりマップがあるとわかりやすいし、読んでいただいた方の満足度も違うと思うんですよね!

 

マップがあるだけで、改めて場所を検索するという二度手間がなくなるわけですし。

 

ということで今回は、はてなブログにGoogleマップを埋め込む方法をご紹介します。

 

 

スポンサーリンク
 

 

Googleマップを埋め込む方法

f:id:tuneni-nemunemu-popoyan:20171106052412j:plain

ステップ1・Googleアカウントにログイン

こちらはわたしのPCのGoogleアカウント情報です。

 

右上にある「Googleアプリ」のマークを押すと、いろいろなアプリが選べるようになります。その中からGoogleマップをクリック!

 

f:id:tuneni-nemunemu-popoyan:20180611064043p:plain

 

そうするとGoogleマップが開きます。

 

ステップ2・紹介したいスポットを検索

Googleマップの検索窓に紹介したいスポットを入力します。今回はスカイツリーにしてみました。

 

そうするとこんな画面が出ま~す。

 

f:id:tuneni-nemunemu-popoyan:20180611064338p:plain

 

次に「共有」をクリック。すると別ウインドウが現れます。

 

f:id:tuneni-nemunemu-popoyan:20180611064634p:plain

 

①「地図を埋め込む」をクリック。

 

②サイズを選ぶ。「小・中・大・カスタム」の4サイズから選べます。

 

③HTMLをコピー。

 

ステップ3・コードをはてなブログへ貼りつけ

はてなブログの編集画面を開きます。

 

そして「HTML編集」の画面にして、先ほどコピーしたコードを張り付けてください。好きなところにペタッとしてください。

 

その後、きちんとマップが埋め込まれているかプレビューで確認してください。

 

スポンサーリンク
 

ステップ4・これでおしまい

すごく簡単でしたね~!!

 

わたしが使っているブラウザは「Microsoft Edge」なので、一度Googleアカウントにログインする必要があるのだと思います。

 

試しに「Google chrome」でやってみたら、すぐに地図が表示されました☆

 

さいごに

 とても簡単だったので、機会があれば試してみてください!

 

ご覧いただきありがとうございました( *´艸`)