CODEWITHSUNDEEP
phpjavascriptgoogle-mapsconflict
Neeraj
Neeraj

Reputation: 497

Google Map Conflict Php and Javascript

I am building an application that has the functionality like

3 tabs created using javascript:

  1. Mapview
  2. ListView
  3. 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. 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.

The button clicks I have also done are using javascript.

Here is my HTML code:

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

Upvotes: 1

Views: 596

Answers (1)

david
david

Reputation: 4278

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

First: place your view_map(); script block within the 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.

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.

Update:

If you place for example view_map() in 

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

both maps where initialized on startup and couldn't check resize.

Upvotes: 1

Related Questions