2011-11-02 170 views
1

我的建筑,像谷歌地图冲突PHP和JavaScript

3个标签的功能的应用程序创建使用javascript:

  1. MapView的
  2. 的ListView
  3. 后活动

当我加载页面时,默认操作是加载谷歌地图,所有我的事件从数据库中检索se,它运行正常。但是,当我点击下一个发布后事件标签时,该地图正在加载,但在该空间中完全不可见。它拖到一个角落。

任何人都可以帮我吗?

我是PHP新手,Google地图。

按钮点击我也做了使用JavaScript。

这里是我的HTML代码:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <title>Google Maps JavaScript API Example: Simple Map</title> 
    <script src="//maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=[My key goes here]" type="text/javascript"></script> 
    <script type="text/javascript"> 
    function initialize() { 
     if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("map_canvas")); 
     map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
     map.setUIToDefault(); 
     } 
    } 

    function view_map() { 
     if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("view_canvas")); 
     map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
     map.setUIToDefault(); 
     } 
    } 
    </script> 
    <script language="javascript"> 
    function change_div(div_id) { 
     document.getElementById('div_1').style.display = 'none'; 
     document.getElementById('div_2').style.display = 'none'; 
     document.getElementById('div_3').style.display = 'none'; 
     //alert(div_id); 
     document.getElementById(div_id).style.display = 'block'; 
    } 
    </script> 
</head> 
<body> 
    <div align="center"> 
    <div align="left"> 
     <a href="javascript:void(0)" onclick="change_div('div_1')">Post Events</a> | 
     <a href="javascript:void(0)" onclick="change_div('div_2')">List Events</a> | 
     <a href="javascript:void(0)" onclick="change_div('div_3')">Map View</a> 
    </div> 
    <div align="left" id="div_1"> 
     <div id="map_canvas" style="width: 500px; height: 300px"></div> 
     <script language="javascript">initialize();</script> 
    </div> 
    <div align="left" id="div_2" style="display:none"> 
     List Events 
    </div> 
    <div align="left" id="div_3" style="display:none"> 
     <div id="view_canvas" style="width: 500px; height: 300px"></div> 
     <script language="javascript">view_map();</script> 
    </div> 
    </div> 
</body> 

</html> 
+0

它拖到一个角落,这是什么意思 – david

+0

地图没有完全显示在地图上分配的空间。它缩小到一边,我希望它显示适合该空间。 – Neeraj

+0

你有没有允许div的宽度/高度来容纳地图的大小 – david

回答

1

抱歉,我不真的知道,因为你的API是旧版本,我没有钥匙,它dosnt工作,所有我可以建议有几件事情

第一:放置view_canvas专区内的view_map();脚本块

<div align="left" id="div_3" style="display:none"> 
    <div id="view_canvas" style="width: 500px; height: 300px"><script language="javascript">view_map();</script></div> 

</div> 

二的另一件事是你change_div()它的功能看起来有点大。

最后可能会更新到更新的Map API,您不需要它的密钥,并且与旧版浏览器更向后兼容。

更新:

如果您在

<a href="javascript:void(0)" onclick="change_div('div_3');view_map();">Map View</a> 

放置例如view_map()并从div_3<script>view_map()</script>应正确显示。

这两个映射在启动时初始化并且无法检查调整大小。

+0

@Neeraj看到更新回答上面,并删除你评论与你关键 – david

+0

@大卫..非常感谢你的家伙..我得到它完全正确....再次感谢您... – Neeraj