-1

リキッドレイアウトのページ内にグーグルマップを読み込もうとしています。

これは私のindex.phpページのCSSです：

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    font: normal 13px/150% Arial, Helvetica, sans-serif;
}
#div1 {
    width: 50%;
    height: 50%;
    float: left;
    background: #DDD;
    overflow: scroll;
}
#div2 {
    width: 50%;
    height: 100%;
    float: right;
    background: #AAA;
    overflow: scroll;
}
#div3 {
    width: 50%;
    height: 50%;
    float: left;
    background: #777;
    overflow: scroll;
}

私の地図は別のページに含まれていますmap.php以下は私のmap.phpページの内容です：

<html>
<head>
    <style type="text/css">
        html { width: 100%; height: 100%; }
        body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
        #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
      // google map code
    </script>
</head>

<body onload="initMap()">
    <div id="map"></div>
</body>

map.phpからマップを開くと、マップは問題なく機能します。しかし、index.phpのdiv＃2内にロードしようとすると、灰色の領域しか表示されません。

何が問題を引き起こしているのかわかりません。よろしくお願いします。ありがとう！

編集：

<?php
    // include db connect class
    require_once 'db_connect.php';

    // connecting to db
    $db = new DB_CONNECT();
?>

        <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
            // google map code with a query inside
        </script>

        <div id="map"></div>

マップはまだ表示されていません。

4

1 に答える 1

0

問題はここにあります...

<body onload="initMap()">

body.onloadそのページがを介してロードされた場合、このイベントは発生しませんajax。 元のページ（ ）がロードまたは更新されbody.onloadたときに1回だけ発生します。index.phpこのページにロードされたコンテンツは、別のイベントajaxを取得しません。（これは、ページを更新せずにコンテンツをロードするためbody.onloadの主要なポイントの1つです。）ajax

これを回避するには、.load()コールバック関数を利用します...ロードが完了した後に起動します。ajax

$("#div2").load('map.php', function() {
    // put init inside the callback
    initMap();
});

また、のHTMLをリファクタリングmap.phpして、で無効なHTMLが発生しないようにしますindex.php。<html></html>つまり、の中に、、、<head></head>および<body></body>タグを含む有効なHTMLを含めることはできません<div>。

CSSをグローバルCSSファイルまたはのに移動しますhead。index.phpページmap.phpには次のものだけが含まれている必要があります。

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
    // google map code
    function initMap() { // etc.
        ....
</script>
<div id="map"></div>
于 2013-03-09T15:40:53.273 に答える