Jquery 谷歌地图未显示内部分区液体布局_Jquery_Ajax_Google Maps_Html

Jquery 谷歌地图未显示内部分区液体布局

jquery ajax google-maps html

Jquery 谷歌地图未显示内部分区液体布局,jquery,ajax,google-maps,html,Jquery,Ajax,Google Maps,Html,我正在尝试将谷歌地图加载到一个具有液体布局的页面中这是我的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

我正在尝试将谷歌地图加载到一个具有液体布局的页面中

这是我的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;
}

我的地图包含在另一个页面中。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>


html{宽度：100%；高度：100%；}
正文{宽度：100%；高度：100%；边距：0；填充：0；边框：0；}
#贴图{宽度：100%；高度：100%；边框：0px；填充：0px；}
//谷歌地图代码

当我从map.php打开地图时，它工作得很好。但是当我尝试将它加载到index.php的div#2中时，我看到的只是一个灰色区域

我不知道是什么导致了这个问题。我将非常感谢你的帮助。谢谢

编辑：


//谷歌地图代码里面有一个查询

地图仍然没有显示。

问题在这里

<body onload="initMap()">

我还将重新考虑

map.php

的HTML，这样就不会在

index.php

上出现无效的HTML。换句话说，在

中不能有带有

、

和

标记的有效HTML

将CSS移动到全局CSS文件或

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>


//谷歌地图代码
函数initMap（）{//等。
....
解释如何在另一页的div中打开它？通过ajax打开整个另一页？显示将地图加载到div
中的代码。是的，我的index.php$（“#div2”）.load（“map.php”）中有一个脚本
这就是你的全部问题。你不能以这种方式触发另一个主体。onload
事件，因此你永远不会运行initMap（）
函数。我在
标记前面有一个at脚本：$（函数（）{$（“#div2”）.load（“map.php”）；）；
我在我的中包含了jquery，您应该将所有必要的代码放在OP中，而不是放在注释中。而且无论您将.load（）放在何处
，你将无法强制另一个body.onload
事件发生。当你加载index.php
时，onload
事件已经发生……无论你做了多少ajax
你都不会再启动另一个。我现在不确定如何重构map.php来运行javascript（带有一些php代码）没有htmltags@user1994644，请参阅我的编辑。当代码加载到div2
中时，它将在html
和body
标记中结束，这些标记已经属于index.php
。我按照您的说明进行了操作，但仍然无法显示地图。我编辑了OP以显示代码。@user1994644，请做得更好。@user1994644b准确地解释您向我们展示的内容。这是新的map.php
页面的代码吗？在div2
中呈现的HTML是什么样子的？其中的所有内容都是您期望的吗？您是否收到任何JavaScript控制台错误？是initMap（）
甚至被调用？我能告诉你的是，在你将谷歌地图代码加载到页面后，你需要初始化你的谷歌地图。应该很简单。div2
是否隐藏在index.php
上？谷歌地图不能在隐藏元素中呈现。@user1994644，我回头看了你在您可以在正文
结尾前显示加载
。为什么要使用ajax
将内容加载到div2
？为什么不首先将所有内容放入div2？
$("#div2").load('map.php', function() {
    // put init inside the callback
    initMap();
});

<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>