グーグルマップをhtmlに貼り付けた際に・・・。

質問

グーグルマップをhtmlに貼り付けた際に・・・。
こんにちは、初めて質問します。
質問内容や表現に不安はありますが、お力をお借りしたいです。よろしくお願いします。
現在、ホームページを作っています。
htmlの事は独学で少し勉強した程度です。CSSも同様です。
グーグルマップをページ内に貼り付けたいのですが
グーグルマップに画像を<div　style>で乗せてLINKをしたいので
グーグルマップがスクロールや拡大・縮小などが出来ないようにしたいと考えています。
そこで、考えたのが、透明なグーグルマップと同等のpngを<div style>で乗せ
スクロール出来ないようにしたのですが、そこは成功したのですが
なぜか、マップの下に同等のスペースが出来てしまいます。
<div style>を使った場合、どうしてもスペースが開いてしまうのでしょうか？

具体的なソースは以下です
<iframe～～～</small>　←これがグーグルマップの貼り付け
<div style="position:relative; left:**px; top:-**; overflow:hidden; z-index:1;>
<img src="***">
</div>　←これが透明のpng
<font size="4">*****</font>

とすると、マップの下に透明png分スペースが開いた下に文字がきます。
どうしてでしょうか・・・。

お聞きしたい点を整理しますと
(1)グーグルマップをスクロールまたは、拡大縮小出来なくする方法はありますか？
(2)divstyleを使った際に出来るスペースをどのようにしたら消せるのか

どちらかが解決出来れば、望んでいる形にできるとは思うのですが
力不足で申し訳ないのですが、お力を貸していただければと思います・・・。

回答No.2

nekomikekamo · ベストアンサー

(2)の回答だけですが、
<div style="position:relative;">#←追加
　　<iframe～～～</small> #←google map
　　　　<div style="position:absolute; left:0px; top:0px;z-index:1;width:500px;height:500px">#←透明なdivを上にかぶせる。
　　</div>#←透明なPNG画像は削除。
</div>
という方法ではいかがでしょうか？
divを500px、500pxとしていますが、そこはgooglemapのサイズと一緒にしてください。

(1)はjavaScriptがらみの話になるのでちょっと面倒そうですね。

お礼

こんにちは。
お返事が遅くなり、大変申し訳ありません。
教えていただいた方法を試した結果、無事出来ました！
大変感謝しております。ありがとうございます。
これは、positionをabsoluteにしたことによる効果なのでしょうか？
よろしければ、今後の飛躍のために　是非、教えていただきたいです。

回答No.4

nekomikekamo

#2です。
簡単に解説を。
positionにrelativeを指定した場合、leftやtopで要素を移動できますが、
leftやtopで「移動する前の表示場所」も占有されたままになってしまいます。

つまり、png画像が見掛け上leftやtop指定で移動したかに見えますが、
本来表示される位置(マップの下)を占有したままになるため、
マップの下に透明png分スペースが開いた下に文字が表示されてしまっていたわけです。
(この現象を回避するために、マージンの相殺と言う方法もあります。
興味がありましたら調べてみるといいかもしれません。)

position:absoluteを指定すると、本来表示される位置からは外れます。
つまり、マップと文字の間にabsoluteを指定したdivがあるにもかかわらず、
マップの直ぐ下に文字が表示されるようになります。
(absoluteのdivは無視されます。)

absoluteは、positionプロパティのstatic以外の値が指定されている
親ボックスの左上が基準位置となります。
そこで、マップを「position:relativeで指定したdiv要素」で囲むことで、
「position:absoluteを指定したdiv」の基準位置をマップの左上位置に合わせています。

これでマップの表示開始位置と「position:absoluteを指定したdiv」の表示開始位置
が一致するため、「position:absoluteを指定したdiv」の縦横をマップのサイズと合わせて
あげる事でマップを覆い隠す事に成功しています。

分かり辛い説明で申し訳ありません。

こちらも参考にしてみてください。
http://www.htmq.com/style/position.shtml

お礼

またまたお礼が遅くなりまして申し訳ありません！
大変分かりやすく教えていただきまして、ありがとうございます。
htmlもですが、CSSなどもいじり始めたばかりでしたので、大変参考になりました！
教えていただいたサイトなど、数々のサイトを見ていたのですが
nekoさんのように、分かりやすく丁寧に教えているサイトはありませんでした。
ありがとうございました。

回答No.3

yyr446

そもそも、グーグルマップの複写が規約で禁止されているのに

＝＝＞そんなあなたに、お勧めは「Google Static Map API」です。

「Google Static Maps API では、Google マップの画像を自分の Web ページに埋め込むことができます。JavaScript や動的なページの読み込みは必要ありません。Google Static Map サービスは、標準的な HTTP リクエストを通じて送られた URL パラメータを基に地図を作成し、Web ページで表示できる画像として地図を返します。」

※モバイルでも使えます。

http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/

お礼

APIはいじってみたのですが、少し分かりにくくて諦めてました。
参考にさせていただきます。

回答No.1

grumpy_the_dwarf

当然です。position:relativeは要素を本来あるべき位置から相対的
に移動する指定ですが、そうやって移動された要素の後続の要素た
ちは、まるで移動なんかされなかったかのように配置される規則に
なっています。高さを持つ要素を移動すれば、その高さ分の空間は
空きますね。

ていうか、ナビゲーションできないのならマップを読み込む必要は
無いわけで、マップをキャプチャした画像を置いとけばいいんじゃ
ないですかね。その画像をイメージマップで使えば、好きなように
できますよ。

変なdiv厨風味が定着する前に、ちゃんとした規格書と標準準拠の
ブラウザを使う習慣をつけましょう。

参考URL：

http://www.w3.org/TR/

お礼

早速の回答ありがとうございます。
ナビゲーションが本来の目的ではないのです。
地図等をトレースするのが下手なのと、フリーの地図画像では良いのが無いという理由から
グーグルマップをベースにしたいと考えました。
そもそも、グーグルマップの複写が規約で禁止されているのに
なぜ、そのような規約違反行為を薦めるような助言をするのでしょうか？

他に何か策があれば助言頂きたいです。
そもそも、欲しい回答が得られていません。
生意気言って申し訳ないのですが、知識の無い人間に
偉そうに発言をし、優越感に浸りたいのでしたら、完全に場違いです。