image

お店のホームページなど作っているとどうしても「地図」が必要になりますよね?

ちょっと前であれば、地図を描いて画像にしてアップして・・・というのが必要でしたが、

今は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マップを開いて、入れたい地図を表示させます。

image

(こんな感じですね)

 

続いて、画面右下にある 歯車→地図を共有または埋め込む をクリックします
仕様が変更されて、場所が変更になりました!(2015/12/25)
 1942
(画面左上のメニューをクリック (赤丸のところですよー))
1943

(ここまで大丈夫ですかー?)

 

左からメニューが出てきたら「地図を共有または埋め込む」タブを押してあげると、表示のイメージが出てきます。

ここで「地図を埋め込む」を押してあげて・・・ 

image

(左側の「中」を押すとサイズも変えられるんですよ)

 

下の赤丸部分が「地図のアドレス」になるのでコピーしておきます。

image

 

HTMLに貼り付ける

コピーしたらindex.htmlの編集に戻ります。

さっき作ったスペースにコピーした「地図のアドレス」を入れてあげます。

<a name="shop"></a>
<table class="contents_table" ><tr><td>

    <iframe src="https://www.google.co(中略)iframe>

</td></tr></table>

 (↑赤字が追加部分。本来は結構ながいです。)

これで保存してあげれば「GoogleMAP」が表示されるようになります。
no title
 

簡単ですね?

これで地図はバッチリです!!

 

おまけ

地図のアドレスを見ていくと・・・

・・・・width="600" height="450"・・・・

っていうのがあります。

 

なんか見覚えありますよね?

 

試しにwisth=”30%” geight=”30%”にしてみましょう。

no title

ブラウザのサイズに合わせてGoogleマップのサイズも変わるようになりました。