【地図】グーグル・マップをホームページで表示するための2つの方法

その他 インターネット
この記事は約3分で読めます。

ボクは、旅行記を中心にブログを書いているのですが、今までブログの中に地図を入れていませんでした。

地図

事務所のホームページには、事務所の所在地を示すため、Google(グーグル)マップを入れていたのですが、ブログでは何となく、なおざりにしていました。

やっぱり旅行記は、地図があると説明が判りやすくなりますよね。
ということでこれからは、ブログの中に地図を入れていくことにしました。

スポンサーリンク

Googleマップの表示方法は 2つ

Googleマップの表示方法には、次の 2通りあります。

  • リンクを送信する …… テキストリンクをクリックしたときに、地図を表示する
  • 地図を埋め込む ……… ページの中に地図を埋め込み、最初から表示しておく
宝の地図

表示しなければならない地図がたくさんある場合や、必要に応じて地図を参照すればいい場合は「リンクを送信する」を利用します。

表示しなければならない地図が少ししかない場合や、説明のために地図を見てもらいたい場合は「地図を埋め込む」を利用します。

リンクを送信する

まずは、Googleマップを表示します。

Googleマップにて

Googleマップでマーク

作業手順:

  1. もし強調したい場所があれば、地図の上のマークをクリック(マークが赤くなります)
  2. 左上のアイコン「メニュー(よこ三本線)」をクリック
Googleマップのメニュー

作業手順:

  1. サイドメニューの「地図を共有または埋め込む」をクリック

共有ウィンドウにて

Googleマップでリンクを送信

作業手順:

  1. 「共有」ウィンドウの「リンクをコピー」をクリック

ホームページにて

  1. ホームページの任意の文字列にテキストリンクを貼る

(設定例)ここは天下分け目の関ケ原合戦決戦地です

以上です。

地図を埋め込む

まずは、Googleマップを表示します。

Googleマップにて

Googleマップでマーク

作業手順:

  1. もし強調したい場所があれば、地図の上のマークをクリック(マークが赤くなります)
  2. 左上のアイコン「メニュー(よこ三本線)」をクリック
Googleマップのメニュー

作業手順:

  1. サイドメニューの「地図を共有または埋め込む」をクリック

共有ウィンドウにて

Googleマップで地図を埋め込むに切り替える

作業手順:

  1. 「共有」ウィンドウの「地図を埋め込む」をクリックして、画面を切り替える
食事のメニュー

ここで、埋め込む地図のサイズは、次の 4つの中から選べます。

  • 小 …………………… 400×300 ピクセル
  • 中 …………………… 600×450 ピクセル
  • 大 …………………… 800×600 ピクセル
  • カスタムサイズ …… 任意のサイズをピクセルで指定

地図のサイズが、大中小の場合

Googleマップで地図を埋め込む

作業手順:

  1. 必要があれば、埋め込む地図のサイズを変更(カスタムサイズの場合は、次の手順へ)
  2. 「共有」ウィンドウの「HTML をコピー」をクリック

地図のサイズが、カスタムサイズの場合

Googleマップで埋め込む地図のサイズをカスタム

作業手順:

  1. 埋め込む地図のサイズで「カスタムサイズ」を選択
Googleマップで埋め込む地図のサイズを指定

作業手順:

  1. 「共有」ウィンドウで、任意のサイズを単位ピクセルで指定
  2. 「実サイズでプレビュー」をクリック
Googleマップで埋め込む地図のサイズを指定してプレビュー

作業手順:

  1. 表示された地図で、実際の地図の表示を確認し、確認が終わったら地図を消す
  2. 「共有」ウィンドウの「HTML をコピー」をクリック

ホームページにて

  1. ホームページの好きな場所に、HTMLコードを貼り付ける

(設定例)

以上です。

あとがき

今まで旅行記の中で、どのような道路を通って、目的地まで行ったのかを言葉だけで説明していましたが、これからは地図を使って説明できるようになりました。

ブログをする男性

毎日少しずつ、ブログに地図を追加しているのですが、場所によって判りやすい縮尺が違うため、何度か試行することになり、たいへんです。

ただこれも、判りやすいブログのためなので、頑張って進めていきたいと思います。

コメント

タイトルとURLをコピーしました