その他/グーグルマップの貼り付け方

• Prev
• その他

---

グーグル・マップの貼り付け方 †

本資料はグーグルマップの貼り付け方を記します。
2009年8月に作成した記事のため、現在の状況と異なる場合があります。

---

スポンサーリンク

---

1.グーグルマップで地図を検索 †

グーグルマップを取得する「住所」を入力し「地図を検索」ボタンをクリック。
http://maps.google.co.jp/

上記のように検索結果が表示される。

2.吹き出しの消去 †

指定なしの住所検索の場合、上図のように吹き出しが表示されている。
これを消去する場合には、以下の手順にて操作を行う。

• (A)部分にマウスを移動し右クリックするとメニューが表示されるので、「ここからのルート」を選択。

• 上記の操作により吹き出しが消去されたことを確認し「リンク」をクリックし、「埋め込み地図のカスタマイズとプレビュー」をクリックする。

3.地図の位置を調整 †

下図のカスタマイズ画面が表示されるのでマウスにて位置調整を行う。
下図(例)では、(A)の位置を左上に移動。(「＋－」により地図の拡大・縮小などのカスタマイズも可能)

4.HTMLコードの取得 †

位置など調整後、下のHTMLコードを取得し、作成しているHTMLの任意の位置に配置することにより完了。

5.「大きな地図で見る」というリンクの加工 †

取得したHTMLコードは下図のように表示され一番下に「大きな地図で見る」というリンクがある。
しかし、上記手順では吹き出しを非表示と設定しグーグルマップのHTMLコードを取得しているので「大きな地図で見る」をクリックした場合、吹き出しが表示されない。
「大きな地図で見る」で吹き出しが表示される(標準的な表示) ようにするためには以下の手順を行う。

6.再度グーグルマップで検索 †

再度、グーグルマップを取得する「住所」を入力し「地図を検索」ボタンをクリック。

7.HTMLの加工 †

項番6で取得したHTMLコードと項番４で取得したHTMLコードを加工する。
項番4で取得したHTMLコードは以下のようになっている。

項番6で取得したHTMLコードは以下のようになっている。

項番4で取得したHTMLコードでは、「大きな地図で見る」をクリックしても吹き出しが無効となっているので、
項番4で取得したHTMLコードの緑字の部分を消去し項番6で取得したHTMLコードの赤字に置き換える。

8.HTMLコード完成例 †

置き換えを行ったHTMLコード例は以下の通り(わかりやすいように色づけしてあります)

置き換えを行ったHTMLコード例は以下の通り。(わかりやすいように色づけしてあります。)

以上、グーグルマップの貼り付け方でした。

---

スポンサーリンク