ブログ運営

googleマップをブログへ埋め込む簡単な方法

こんにちは、ねこまんま(@nekomanma_free)です。

先日、記事を書いているとき

 

ねこまんま
ねこまんま
記事の中にgoogleマップを表示させたい!でもどうやってやるんだろ?

 

表示させる方法を調べ実践したところ、とても簡単ですぐに表示させる方法を覚えることができました。

ではさっそく、googleマップをブログ内へ埋め込み、表示させる方法を解説していきます。

googleマップをブログへ埋め込む簡単な方法

1.googleマップのサイトを開く

まずはgoogleマップのサイトを開きます。

 

2.ブログに表示したい場所を検索する

次に、ブログ内で表示させたい場所をgoogleマップ で検索します。今回は先日記事を書いた「太陽公園」と入力しました。

 

3.共有マークを押す

次に共有マークを押します。

 

共有マークを押すと、ウィンドウが表示されます。ここでは地図を埋め込むを選択しましょう。

 

4.地図の大きさを選択する

ブログ内に表示させる地図の大きさは、「大」「中」「小」「カスタムサイズ」の4種類から選択することができます。

 

各サイズの詳細は以下の通りとなります。

横 800px   縦 600px
横 600px   縦 450px
横 400px   縦 300px
カスタムサイズ任意のサイズに変更

 

カスタムサイズを選択するとウィンドウが開き、任意の大きさに変更することが可能です。

 

5.埋め込むコードをコピーする

次に、ブログに貼り付ける用のHTMLをコピーします。
「HTMLをコピー」を押していったんコピーしておきます。

 

6.ブログ編集画面に埋め込みコードを貼り付ける

では、コピーした「HTML」をブログへ貼り付けていきましょう。

画面はWordPressの新規投稿画面になります。こちらでまず入力方法をテキストへ変更します。

テキストエディタへ変更したら、さきほどコピーしたHTMLを貼り付けます。

 

これで、ブログにgoogleマップを表示できるようになりました。

実際にブログに貼り付けると、このような感じになります。

貼り付けた例は「中」のサイズなので、ブログのレイアウトなどに合わせてサイズを選択するのが良いと思います。

まとめ

以上が、「googleマップをブログへ埋め込む簡単な方法」の手順です。

非常に簡単な方法なので慣れればすぐに覚えれると思います。

まだ、googleマップをブログ内へ表示させたことが無い方は、この手順で試してみてはいかでしょうか?