ゼロからはじめるクレジットカード

バンドルカードやクレジットカードの情報を発信しています

トップ > ブログ(blog) > ブログのGoogle mapの埋め込みを分かりやすく解説

ブログのGoogle mapの埋め込みを分かりやすく解説

ブログ(blog)

ブログにGoogle mapの埋め込みはどのようなやり方をすればいいの？

ショップの場所をブログで公開するために、Google mapの埋め込みをしたい。

あなたは今、このようにお考えですよね。

Google mapの埋め込みはとても便利な機能ですので、ブログを運営しているショップのオーナーはぜひ活用すべきです。

ブログのGoogle mapの埋め込みを分かりやすく解説

ブログにGoogle mapの埋め込みすれば、特定の位置を示すことができます。

また目的地までのルートも、Google mapの埋め込みで表示することができます。

ショップのオーナーでブログを運営している人にとって、Google mapの埋め込みは集客のために役立つ機能です。

しかしGoogle mapの使い方には注意点がありますので、それも併せてブログにおけるGoogle mapの埋め込みのやり方をみていきましょう。

ブログのGoogle mapの埋め込みのやり方

ブログのGoogle mapを埋め込みするやり方を手順に沿ってみていきましょう。

  • 手順1.Google mapで検索して埋め込みしたい場所を表示する
  • 手順2.「共有」をクリックする
  • 手順3.Google mapのサイズを選択する
  • 手順4.埋め込みコードをコピーする
  • 手順5.埋め込みコードをブログにペーストする

手順1.Google mapで検索して埋め込みしたい場所を表示する

Google mapの画面左上にある「Googleマップを検索する」と薄く表示されている検索フォームに、埋め込みしたい場所を入力して検索します。

手順2.「共有」をクリックする

Google mapの左画面に、検索した場所の詳細情報が表示されるので「共有」アイコンをクリックしましょう。

「共有」というポップアップが表示されるので、共有方法から「地図を埋め込む」タブをクリックします。

手順3.Google mapのサイズを選択する

埋め込みするGoogle mapのサイズを、「小」「中」「大」「カスタムサイズ」の4種類から選択します。

  • 小：縦 300px　横 400px
  • 中：縦 450px　横 600px
  • 大：縦 600px　横 800px
  • カスタムサイズ：自由に数値を入力

手順4.埋め込みコードをコピーする

「HTMLをコピーする」をクリックしましょう。

表示されている埋め込みコードをドラッグして選択して右クリックでコピーすることもできますが、ソースコードはとても長いです。

そこで上のリンクから埋め込みコードを取得すれば、ワンクリックでコピーできます。

埋め込みコードをブログにペーストする

Google mapを埋め込みたいブログのHTML編集画面に、コピーしたコードをペーストします。

これで地図の画面左上にラベル形式で場所の詳細情報が表示されたGoogle mapがブログに埋め込みされましたので完了となります。

ブログにGoogle mapの目的地を埋め込みするやり方

ではつづいてブログにGoogle mapの目的地を埋め込みするやり方をみていきましょう。

  • 手順1.Google mapで検索して埋め込みしたい目的地を表示する
  • 手順2.「ルート・乗換」をクリックする
  • 手順3.出発地を入力する
  • 手順4.移動手段をクリックで選択する
  • 手順5.メニューアイコンから「地図を共有または埋め込む」をクリックする
  • 手順6.埋め込みコードをコピーする
  • 手順7.埋め込みコードをブログにペーストする

手順1.Google mapで検索して埋め込みしたい目的地を表示する

Google mapの画面左上「Googleマップを検索する」と表示されている検索フォームに、埋め込みしたい目的地を入力して検索します。

手順2.「ルート・乗換」をクリックする

Google mapの左画面に、検索した場所の詳細情報が表示されるので「ルート・乗換」アイコンをクリックしましょう。 これでGoogle mapに目的地を入力した状態になります。

手順3.出発地を入力する

Google mapでルート案内するために、「出発地を入力するか地図をクリック」へ出発地を入力します。

手順4.移動手段をクリックで選択する

出発地と目的地の入力フォームの上にあるアイコンから移動手段を選択しましょう。

手順5.メニューアイコンから「地図を共有または埋め込む」をクリックする

画面左上の「三」アイコンをクリックしたら、表示されたメニューから「地図を共有または埋め込む」をクリックしましょう。

「共有」のポップアップが表示されたら、上項で解説した手順で同じようにGoogle mapを地図に埋め込みしてください。

ブログのGoogle mapの埋め込みに関する注意点

Google mapの埋め込みに関する注意点として、ブログへの埋め込みは最小限にしましょう。

埋め込みしすぎてしまうと、ブログが重くなってしまいます。

ブログが重くなってしまうと、読者の利便性は下がってしまうので、離脱されてしまうおそれがあります。

Google mapの埋め込みをするとブログが重くなってしまうからと、地図をスクショして公開する行為は、Google mapに禁止されています。

詳しくは、Googleマップのヘルプ「他のユーザーとマップやルートを共有する - パソコン - マップ ヘルプ」のページをご確認ください。

対処法としては、ブログへの埋め込みを最小限にするしか方法はないため、必ず守りましょう。

ブログのGoogle mapの埋め込みを分かりやすく解説まとめ

ブログのGoogle mapの埋め込みのやり方として、特定の場所を埋め込みする方法と、目的地までのルートを埋め込みする方法について解説しました。

とても簡単にできますので、利用規約をきちんと守ってご利用ください。