はてなブログ

【簡単】はてなブログにGoogleマップを埋め込む方法!

こんにちはびびです!

先日福岡旅行に行った際の記事で、初めてGoogleマップを埋め込んでみました。

 

初めての福岡旅行!【グルメ編】明太子を食べるなら元祖博多めんたい重がおすすめ!こんにちはびびです! 先日福岡に旅行に行ってきました! こちらの記事で、おすすめの観光地を紹介しましたが、 https...

 

こんな感じで地図の画像ではなく、Googleマップが埋め込まれているやつです。

このような、お店やスポットを紹介する記事には、地図がのっていると便利ですよね。

実はこれ、とてもかんたんにできちゃうんです。

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

※パソコンからの方法になります。

はてなブログにGoogleマップを埋め込む方法

f:id:kaeru2019:20190311225525p:plain

①Googleマップで場所を検索する

まずはGoogleマップをひらいて、ブログにのせたい場所を検索しましょう。

f:id:kaeru2019:20190311213604j:plain

こちらの検索窓に入力します。

これは説明しなくてもわかるか( ̄▽ ̄;)

今回は、ぼくが最近気になっている「ムーミンパーク」で検索しました。

②地図の範囲を選択

埋め込む地図の範囲を選択します。

f:id:kaeru2019:20190311213609j:plain

画面右下の+と-で範囲を調整します。

 

③メニューをクリック

範囲を選択したら、画面左上の三本線をクリックします。

f:id:kaeru2019:20190311213615j:plain

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

三本線をクリックするとメニューバーがでてくるので「地図を共有または埋め込む」をクリックします。

f:id:kaeru2019:20190311213619j:plain

⑤地図を埋め込むをクリック

そうするとこの画面になるので、「地図を埋め込む」をクリック。

f:id:kaeru2019:20190311213827j:plain

⑥ブログにのせる地図の大きさを選択

②では地図の範囲を選択しましたが、こんどは地図自体の大きさを選択します。

こちらをクリックして「小・中・大・カスタムサイズ」の中から選びましょう。

f:id:kaeru2019:20190311213702j:plain

⑦HTMLをコピー

こちらに表示されているコードをコピーします。

f:id:kaeru2019:20190311213706j:plain

⑧はてなブログに埋め込む

次ははてなブログを開いてください。

地図をはりたい記事の編集画面にうつって、「HTML編集」を選択します。

f:id:kaeru2019:20190311223459j:plain

先ほどコピーしたコードを、地図を埋め込みたい場所に貼り付けしましょう。

f:id:kaeru2019:20190311223510j:plain

これで完了です!!

プレビューを確認してみてください。

こんな感じで埋め込まれていると思います。

ちなみにこの地図↑の大きさが「中」で、この記事の最初にのせた地図が「小」です。

スマホで見ると「小」がちょうでいいですね。

まあこのへんはお好みで。

おわりに

どうですか、簡単だったでしょ。

はてなブログにGoogleマップを埋め込む際はぜひ参考にしてみてください。

それでは。