スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

グーグルマップをサイトに埋め込む

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第15回目の授業です。

企業やお店のサイトの概要ページやアクセスページに、よくグーグルマップが表示されているのを見かけますね。

グーグルマップをサイトに埋め込む

グーグルマップを埋め込むと、そのページで地図内をドラッグで移動できたり拡大縮小したり、もっと大きな画面で見たければGoogleMapサイトにジャンプできたりと、とっても便利です。

これ、とっても簡単に実装できますので、是非覚えましょう!

INDEX

  1. GoogleMapのサイトで、表示させたい場所を検索する
  2. 画面左にある「リンク」アイコンをクリック
  3. 地図のサイズを選んで、コードをコピー
  4. サイトのHTMLにコードをペースト
  5. CSSで仕上げる

1.GoogleMapのサイトで、表示させたい場所を検索する

まずはGoogleMaps(https://maps.google.co.jp/)のサイトで、表示させたい場所を検索します。

グーグルマップをサイトに埋め込む

2.画面左にある「リンク」アイコンをクリック

さらに、「埋め込み地図のカスタマイズとプレビュー」をクリック

グーグルマップをサイトに埋め込む

3.地図のサイズを選んで、コードをコピー

別ウィンドウで地図サイズをプレビューしながらカスタマイズできます。
小(300×300px)・中(425×350px)・大(640×480px)、またはサイトのデザインに合わせたい場合はカスタムを選択して、サイズを決めます。

この時、プレビュー内で拡大または縮小して好みの表示倍率にしておきます。

グーグルマップをサイトに埋め込む

4.サイトのHTMLにコードをペースト

サイズや倍率の設定が済んだら、「サイトに地図を埋め込む場合はこの HTML をコピーして貼り付けます。」の下のコードを全てコピーします。

そしてDreamweaverなどで地図を表示させたいHTMLの編集画面に移動し、表示させたい場所にペーストします。

グーグルマップをサイトに埋め込む

埋め込みはこれで終わりです!
必要があれば、さらにCSSで見た目を整えましょう。

5.CSSで仕上げる

さっき貼り付けた地図のコードを囲むように、divタグを設置します。

グーグルマップをサイトに埋め込む

あとはここにid属性やclass属性などをつけて、borderやmargin、paddingのプロパティをCSSに書けばOK!ここでは、主に枠線とマージンの設定をしています。

グーグルマップをサイトに埋め込む

簡単でしたね!

それでは、お疲れさまでした!

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

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

コメントの投稿

非公開コメント

Re: No title

nanden様
コメントありがとうございます。
もっと簡単な方法、是非知りたいです!
何か間違ったことを書いていたら、ご指摘いただけたら嬉しいです。
どうぞよろしくお願いいたします。

タグ

なぜDIV要素内に、iframe要素を埋め込む必要があるのか???
html4.01の場合であれば、CSS内のid="map"にwidthとheightを指定、
<a href="google_mapの短縮アドレス" title="">地図表示</a>にすればいいだけ。

Re: タグ

nanden様

コメントありがとうございます。
html4.01のstrict型ではiframeを使えないので、ご提示いただいた通りリンクだけ設定しておくべきなのですね。
iframe要素はhtml4.01、xhtmlのstrict以外、それとhtml5でも正式採用されたとのことなので、それだったらiframe要素は使ってもいいのですよね。。
ページ中に表示した地図内で、ドラッグしたり拡大縮小したりできるのがiframeによる埋め込み地図の魅力だと思います。
確かにテキストリンクにする方が、HTMLソースがすっきりして表示速度も上がりそうですね。
ありがとうございました!
ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。