Google Map Conflict Php和Javascript

Question

I am building an application that has the functionality like 我正在构建具有以下功能的应用程序

3 tabs created using javascript: 使用javascript创建的3个标签：

Mapview 地图视图
ListView 列表显示
Post Events 发布活动

When I load the page the default action is the loading of Google map with all my events retrieved from database, and it is functioning properly. 当我加载页面时，默认操作是加载Google地图，其中包含我从数据库中检索到的所有事件，并且它运行正常。 But when I click on the next post events tab, in that map is loading but it is not visible fully on that space. 但是，当我单击下一个发布事件选项卡时，该地图正在加载中，但在该空间中无法完全看到。 Its dragging on to one corner. 它拖到一个角落。

Can anyone please help me out? 有人可以帮我吗？

I am new to Google maps in PHP. 我是PHP的Google地图的新手。

The button clicks I have also done are using javascript. 我也完成的按钮点击操作是使用javascript。

Here is my HTML code: 这是我的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>

Answer 1

sorry i dont realy know, because you api is the older version and i dont have a key and it dosnt work, all i can suggest there are few things 抱歉，我真的不知道，因为您的api是较旧的版本，并且我没有密钥，并且它无法正常工作，我只能建议很少的事情

First: place your view_map(); 首先：放置您的view_map(); script block within the view_canvas div view_canvas div中的脚本块

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

Second Another thing is your change_div() function it looks kinda biggie. 第二件事是您的change_div()函数看起来有点大。

Lastly May be Uupdate to the newer Map API you don't need a key for it and is more backwards compatible with older browsers. 最后，可以将Uupdate更新为较新的Map API，您不需要它的密钥，并且与旧版浏览器向后兼容。

Update: 更新：

If you place for example view_map() in 如果您将例如view_map()放在

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

and remove the <script>view_map()</script> from within div_3 should display correctly. 并删除<script>view_map()</script>从内div_3应该正确显示。

both maps where initialized on startup and couldn't check resize. 这两个地图都是在启动时初始化的，无法检查其大小。

Google Map Conflict Php和Javascript

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-11-02 13:51:56

Google Map Conflict Php和Javascript

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-11-02 13:51:56

解决方案1
1 已采纳 2011-11-02 13:51:56