GoogleMapの埋め込みによる、他のCSSへの影響について教えてください。

###GoogleMapの埋め込みで後のCSSに変化
今、WEBページの制作練習をしているのですが、
GoogleMapを埋め込むまでは表示されていたものが表示されなくなってしまいました。
しかも、Firefoxでは表示されるのに、Chromeでは表示されません。
こちらが作成したものです。
↓ ↓ ↓
練習しているページ

###ソースコード

lang
1<div class="cover section4">
2  <div class="centerBox4">
3    <h2>ABOUT ME</h2>
4		<div class="campany">
5			<dl>
6				<dt>所属</dt>
7				<dd>システム開発部</dd>
8				<dt>所在地</dt>
9				<dd>
10					千葉県南房総市
11				</dd>
12			</dl>
13		</div>
14  <div id="mapField"></div><--//ここがmapの部分です
15  </div>
16</div>
17<div class="cover section5">
18  <div class="centerBox">
19    <h2>CONTACT</h2>
20    <p>ぜひお問い合わせください</p>
21    <p style="padding: 10px;"><a href="#">mail TO</a></p>
22  </div>
23</div>
24

lang
1
2.section5 {
3	height: 100%;
4	background: url(../img/03.jpg) no-repeat fixed;
5	background-size: cover;
6	text-shadow: 2px 2px 3px #555;
7}

最後のdiv背景にfixedを入れているのですが、表示されなくなってしまい、
その場でリロードをすると表示されるのですが、fixedがかからず一緒にスクロールされてしまう状況です。
上記にも書きましたが、FireFoxでは思った挙動になっています。
Safariも大丈夫でした。
Chromeはダメでした。
一体何が原因で表示されないのか誰か教えて頂けると感謝です。

宜しくお願いします。

orange0190

2015/06/08 04:29

練習ページをwindowsのchromeで見てみましたが、綺麗に出ているように思えます。どのような点がダメなのかもう少し詳しく教えていただけませんか?

orange0190

2015/06/08 04:31

すみません。確認不足でした。CONTACTの背景が問題の箇所でよろしいんですね?

TChanger

2015/06/08 05:55

ご回答ありがとうございます。はい、その通りでございます。

行動規範の内容に同意します

回答2件

ベストアンサー

chromeの開発ツールで確認したところ、
Failed to load resource: the server responded with a status of 404 (Not Found) http://envelope.pw/sample/js/mapstyle.js
と
Uncaught ReferenceError: initialize is not defined
の2つのエラーが出ています。
まずはmapstyle.jsのパス等が正しいかどうかと確認してみましょう。

投稿2015/06/08 04:35

orange0190

総合スコア1698

TChanger

2015/06/08 06:00

ご回答ありがとうございます。申し訳ありません、要らないファイルのリンクを付けたままでした。汗削除してみたのですが、状況は変わらずの状態です。因みに最後のCONTACT部分でリロードをかけると、表示はされるのですが、固定はされず一緒にスクロールされてしまいます。汗

orange0190

2015/06/08 07:40

backgroundで一括に指定せずに個別に指定した場合にはどうなりますでしょうか?

orange0190

2015/06/08 07:41

もしくは対処療法的ですが、importantを付けてみるのはどうでしょうか?

TChanger

2015/06/10 00:55

お返事が遅くなり申し訳ありません。ご回答ありがとうございます！両方試してみましたが、やはりChromeでは上手く行きません。泣最終手段はマップを画像にするしか無いですかね？汗

orange0190

2015/06/10 01:36

手元でマップがない場合との比較ができませんので、はっきり言って原因は分かりません。比較ができれば、あるいはということもありますが・・・どうしてもという場合はそうですね、画像にするぐらいでしょうか。仰る通り、最終手段ですが。

TChanger

2015/06/10 02:02

そうですよね。 http://envelope.pw/sample/no_index.php 上記にてMapが無いバージョンのリンクを用意しました。これで解明することは如何でしょうか？汗

orange0190

2015/06/10 02:27

原因は未だ不明ですが、以下を試してみてください。 mapInit()の実行を$(document).readyの中に変更

TChanger

2015/06/10 03:00

入れみましたが、ダメでした・・・汗

TChanger

2015/06/10 03:09

ご助言ありがとうございます！関数自体を$(function(){}); の中に入れたら上手いこと行きました！ Jquery自体がいまいち分かっていないので、申し訳ありませんでした。汗

orange0190

2015/06/10 03:16

うまくいったようでなによりです。少し解説を・・・ $(document).ready(function(){});はDOM(画面の各HTML要素)が準備完了した時点で動作するものです。一方で、通常javascriptは読み込まれた時点で動作します。今回、mapInit()はDOM(画面の各HTML要素)の準備が完了する前に実行されてしまい、そのためおかしくなっていたのだと思われます。

TChanger

2015/06/10 05:18

丁寧な解説まで頂きまして感謝です！ DOMという言葉の意味がいまいち理解出来ていなかったのですが、とても分かりやすく教えて頂きましてありがとうございます！

行動規範の内容に同意します

lang
1
2	<div class="cover section4">
3	  <div class="centerBox4">
4	    <h2>ABOUT ME</h2>
5	        <div class="campany">
6	            <dl>
7	                <dt>所属</dt>
8	                <dd>システム開発部</dd>
9	                <dt>所在地</dt>
10	                <dd>
11	                    千葉県南房総市
12	                </dd>
13	            </dl>
14	        </div>
15	  </div>**<!--//ここの</div>が足りません。-->**
16	  <div id="mapField"></div><--//ここがmapの部分です
17	  </div>
18	</div>
19	<div class="cover section5">
20	  <div class="centerBox">
21	    <h2>CONTACT</h2>
22	    <p>ぜひお問い合わせください</p>
23	    <p style="padding: 10px;"><a href="#">mail TO</a></p>
24	  </div>
25	</div>
26
27