*** HTMLで HomePage を作ろう [PartU] ***



[課題3] Google Map をブログに貼る

Google Map は日常生活でも使える便利なツールです。
行き先の所在地探し、ルートの検索も出来ます。
衛星写真の表示も可能になってます。
両方併用で表示すると衛星写真の上に地名も表示され見やすくなります。
これをブログに貼ることが出来れば、行った場所の案内にもなり、
記事の中味が充実したものとなるのではないでしょうか。


「はてなブログ」に Google Map を貼り付けた例です。

◆1:Google のトップページにアクセスし、[地図] をクリックする。


Googleトップページ

◆2:検索で目的地を探して移動
Google Map のトップページが表示されます。
例の場合は表示する目的の場所を「京都駅」としました。
検索窓に「京都駅」と入力し [地図を検索] をクリック。
京都駅を示す地図が目印マーカーが付いて表示されます。


場所の検索

京都駅の地図

◆3:検索を使わずに目的地に移動
Google Map のトップページが表示されます。
地図の左端にある [+] [−] 拡大縮小。[→] でそ方向に移動します。
地図上の手マークが出ている時、クリックして動かしても移動できます。
表示したい目的の場所に移動する。
例として「京都駅周辺」に地図を移動させます。
この場合目印ポインタは表示されません。


GoogleMapトップページ

京都駅周辺

◆4:表示場所の地図の右上にある [このページのリンク] をクリック。


このページのリンク1

このページのリンク2

◆5:地図のHTMLが下の欄に表示される。


地図のHTML


◆6:HTMLの表示されている部分が選択されている場合青くなっているので、この部分にポインタを持っていき右クリックし [コピー] を選択。
ブログ又はホームページで地図の置きたい所に貼り付ける。


HTMLのコピー


◆7:地図の大きさを変えたり、表示の確認をする。
[このぺーじのリンク] をクリックして出てきた表示窓の下に
[埋め込み地図のカスタマイズとプレビュー]
クリックすると、地図の大きさを変えることが出来る設定ページが出てきます。
そこで地図の大きさを好みに変えられる。
このページで、地図の確認も出来る。


地図の確認

地図のカスタマイズ