グーグルマップをブログに埋め込みするやり方と真ん中に寄せる方法

こんにちは、あまと(@amatoful)です。

ブログを作っていて、地図などで案内したくなったらマップを埋め込みたくなりますよね。

そんなマップの埋め込みに定番でおすすめなのがグーグルマップです。

グーグルマップの埋め込みって、文字を打ったり画像を貼り付けたりするだけじゃないので難しいと思われるかもしれませんがめちゃくちゃ簡単なんです。

HTMLの知識もいりませんし、やり方を知ってるか知ってないかだけです。

今回は、グーグルマップをブログに埋め込む方法を紹介していきます。

スポンサーリンク

グーグルマップをブログに埋め込みするやり方

上でも話しましたが、グーグルマップをブログに埋め込むのは簡単でして、ブログを書いているスキルがあるなら誰でもできます。

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

やり方としては以下の流れになります。

  1. グーグルマップのサイトをひらく
  2. 目的地の場所を検索する
  3. 共有でHTMLを取得する
  4. マップの大きさを選択する
  5. ブログに貼り付ける

これだけです。

5段階ではありますが、1つ1つは本当に簡単なのですぐに覚えられます。

では、上のやり方を噛み砕いて見ていきましょう。

グーグルマップのサイトをひらく

まずはグーグルマップのサイトを開きます。

参考 Google MapGoogle Mapのサイト

上のリンクをクリックするとグーグルマップのサイトにとびます。

目的地の場所を検索する

次に左上の枠に目的地を記入します。

今回は東京駅で調べてみました。

こちらに記入するのは今回のような「東京駅」と文字でもいいですし、住所でもどちらでも大丈夫です。

すると右側のマップで目的地に印がつきましたね。

これを貼り付ける作業を次から行っていきます。

共有でHTMLを取得する

次に、共有でHTMを取得します。

左側に共有という部分がありますので、それをクリックしてください。

すると、下のような画面になりますので赤で囲った「地図を埋め込む」をクリックしましょう。

すると、緑の部分に地図を貼り付けられるHTMLが出てきます。

あとちょっとで終わりです。次にマップの大きさを設定しましょう。

マップの大きさを選択する

貼り付ける前にマップの大きさを設定しましょう。

最初にいってしまうと基本的にはデフォルトの「中」のままで問題ありません。

下の画像の赤い部分ですね。

ここで赤い部分をクリックすると、「大・中・小・カスタマイズ」の4つを選ぶことができます。

大きさは以下を参考にしてください。

MEMO
小・・・400✕300
中・・・600✕450
大・・・800✕600
カスタマイズ・・・自由にカスタマイズ

カスタマイズは便利なようですが、実際は中を選んでおけばパソコンでもスマホでもちょうど良い大きさになりますので、こだわりがなければ中のままにしておきましょう。

では、最後にブログに貼り付けましょう。

ブログに貼り付ける

最後にブログに貼り付けます。

先ほどのHTMLの右側をクリックするとコピーができますのでクリックしましょう。

貼り付けるのはHTMLエディタですので注意してください。

例えばワードプレスの場合はビジュアルエディタではなくテキストエディタです。

そのまま貼り付ければマップが作成されます。

こんな感じです。

これでグーグルマップの埋め込みが完成です。

お疲れ様でした。

グーグルマップの埋め込みを真ん中寄せにする方法

これは必須ではないのですが、グーグルマップを真ん中寄せにする方法を紹介していきます。

ちなみに、真ん中寄せはパソコンで見たときのみ変わるのでスマホで見た場合はとくに影響はありません。

画像を真ん中に寄せる方法は、HTMLを<p class=”center”>〜</p>で囲みましょう。

グーグルマップのHTMLを貼り付けて、上のコードをコピペするだけです。

下の画像の赤い部分のように挟みましょう。

これはHTMLで真ん中寄せということです。

こうするとマップが真ん中にいくので、下のような形になります。

僕は結構、真ん中に寄せるほうが好きなので真ん中に寄せていますが、この当たりは好みによるかと思います。

真ん中寄せが良いという方は参考にしてみてください。

まとめ

グーグルマップの埋め込みの方法を紹介しました。

思ったよりも簡単に埋め込むことができたんじゃないかと思います。

グーグルマップは埋め込みをすると読者が各自で大きさを調整してくれたり、目的地のまわりが見れるようになるので埋め込みをしたほうが読者の方のためになります。

また、適度にマップをいれることで文字で説明するよりも分かりやすく記事自体も見やすくなるので場所の説明をするのであればほぼ確実に入れたほうが良いですね。

一度覚えてしまえば、簡単なので今後つかえる知識がつきます。

ぜひこの記事を参考にしてグーグルマップをブログやサイトに埋め込んでみてください。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です