お店のホームページなど作っているとどうしても「地図」が必要になりますよね?
ちょっと前であれば、地図を描いて画像にしてアップして・・・というのが必要でしたが、
今はGoogleマップがあります。
しかも見に来た人が自由に動かせるのでとっても便利!!
今回はそんな「Googleマップ」の入れ方を紹介します。
スポンサードリンク
スペースを作る
まずは、作っているサイトに地図を入れるスペースを確保しましょう。
作り方はもう大丈夫ですよね??
編集するのはindex.htmlです。
前回作った下に新たにスペースを作りましょう。
<table class="contents_table" ><tr><td>
<a
href="cook01.html"
onclick="window.open('cook01.html','windowname','scrollbars=yes,width=600,height=600');
return false;"
>別ウィンドウでひらく</a></div>
</td></tr></table>
(こういうのがありますので、この下に・・・)
<a name="shop"></a>
<table class="contents_table" ><tr><td></td></tr></table>
(これを入れてあげます)
これで地図を入れるスペースが確保できました。
地図を持ってくる
では表示したい地図を探してきましょう。
いつものようにgoogleマップを開いて、入れたい地図を表示させます。
(こんな感じですね)
続いて、画面右下にある 歯車→地図を共有または埋め込む をクリックします
仕様が変更されて、場所が変更になりました!(2015/12/25)
(画面左上のメニューをクリック (赤丸のところですよー))
(ここまで大丈夫ですかー?)
左からメニューが出てきたら「地図を共有または埋め込む」タブを押してあげると、表示のイメージが出てきます。
ここで「地図を埋め込む」を押してあげて・・・
(左側の「中」を押すとサイズも変えられるんですよ)
下の赤丸部分が「地図のアドレス」になるのでコピーしておきます。
HTMLに貼り付ける
コピーしたらindex.htmlの編集に戻ります。
さっき作ったスペースにコピーした「地図のアドレス」を入れてあげます。
<a name="shop"></a>
<table class="contents_table" ><tr><td><iframe src="https://www.google.co(中略)iframe>
</td></tr></table>
(↑赤字が追加部分。本来は結構ながいです。)
これで保存してあげれば「GoogleMAP」が表示されるようになります。
簡単ですね?
これで地図はバッチリです!!
おまけ
地図のアドレスを見ていくと・・・
・・・・width="600" height="450"・・・・
っていうのがあります。
なんか見覚えありますよね?
試しにwisth=”30%” geight=”30%”にしてみましょう。
ブラウザのサイズに合わせてGoogleマップのサイズも変わるようになりました。