【はてなブログ初心者向け】記事に地図グーグルマップを埋め込む方法【超簡単】

f:id:ananachan:20190412180252j:plain

お疲れ様です、あなっちゃんです。

今回は地図(グーグルマップ)を記事に埋め込む方法について解説していきたいと思います。

 

旅行記などを書かれている方は、記事中に地図を入れ込んで正確に場所を示すことができれば、読者により伝わりやすい記事を完成させることができますよね。

 

やり方はとても簡単なので、是非この機会に覚えてみてください。

 

記事にマップを埋め込むと、こんな感じになります。

こうすると東京スカイツリーの場所が一目瞭然ですね。

周囲の道路や建物も表示されるので位置を把握しやすいです。

 

それでは早速、やり方を解説していきます。

 

 

 

記事にグーグルマップを埋め込む方法

 

はてなブログの記事にグーグルマップを埋め込む手順です。

 

① グーグルで場所を検索

 

まず記事に載せたい場所をグーグルで検索しましょう。

より具体的な地名や建物名にしましょう。

f:id:ananachan:20190412181941p:plain

② 地図をクリック

 

次に検索結果画面の上部にあるバーの「地図」をクリックしましょう。

f:id:ananachan:20190412182357p:plain

 

 

③ 画面左上の3本線「メニュー」をクリックする

 

地図がちゃんと表示され、自分の思い通りの場所に赤ピンがついているかどうかを確認してください。

f:id:ananachan:20190412182859p:plain

確認を終えたら、画面左上の「メニュー」をクリックします。

f:id:ananachan:20190412183137p:plain

 

 

④ 「地図を共有または埋め込む」をクリックする

 

次に画面左に出てきたメニューの「地図を共有または埋め込む」をクリックします。

f:id:ananachan:20190412183416p:plain

 

 

⑤ 「地図を埋め込む」をクリックする

 

 

 

共有と出てくるので「地図を埋め込む」をクリックしてください。

f:id:ananachan:20190412184404p:plain

 


⑥ 表示されたHTMLをコピーする

 

するとHTMLコードが表示されるので、全選択してコピーします。

f:id:ananachan:20190412184755p:plain

HTMLコードの左に「中」とありますが、そこで地図のサイズを変更できます。

地図のサイズを変更したい場合は、HTMLコードをコピーする前に、自分の好きなサイズに合わせてみてください。

 

⑦ 先程コピーしたHTMLを記事に貼り付ける

 

さっきコピーしたHTMLコードを記事に貼り付けます。

まず「HTML編集」をクリックして、地図を埋め込みたい箇所にコピーしたHTMLを貼り付けます。

f:id:ananachan:20190412190252p:plain

 

⑧ ちゃんと地図が入っているかどうか確認する

 

「編集 見たまま」をクリックして、地図がちゃんと埋め込まれているかどうかを確認しましょう。

 

これでグーグルマップの埋め込み作業は終了です。

 

 

お疲れ様でした。