このエントリーをはてなブックマークに追加


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

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


スポンサーリンク

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

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

googlemaps01.jpg

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

2.吹き出しの消去

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

  • (A)部分にマウスを移動し右クリックするとメニューが表示されるので、「ここからのルート」を選択。
googlemaps02.jpg
  • 上記の操作により吹き出しが消去されたことを確認し「リンク」をクリックし、「埋め込み地図のカスタマイズとプレビュー」をクリックする。
googlemaps03.jpg

3.地図の位置を調整

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

googlemaps04.jpg

4.HTMLコードの取得

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

googlemaps05.jpg

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

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

googlemaps06.jpg

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

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

googlemaps07.jpg

7.HTMLの加工

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

googlemaps_html01.jpg

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

googlemaps_html02.jpg

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

8.HTMLコード完成例

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

googlemaps_html03.jpg

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

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


スポンサーリンク

添付ファイル: filegooglemaps04.jpg 161件 [詳細] filegooglemaps02.jpg 198件 [詳細] filegooglemaps_html03.jpg 129件 [詳細] filegooglemaps_html01.jpg 135件 [詳細] filegooglemaps05.jpg 145件 [詳細] filegooglemaps_html02.jpg 142件 [詳細] filegooglemaps01.jpg 236件 [詳細] filegooglemaps06.jpg 203件 [詳細] filegooglemaps03.jpg 144件 [詳細] filegooglemaps07.jpg 147件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-03-20 (金) 22:36:11 (1367d)