Google map V3 problem in spry tabbed panels

kbhot · 02-26-2012, 11:08 PM

I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container.

( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly).

I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding
[CODE]
google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); });

after var map = new google.maps.Map(document.getElementById(canvas), myOptions);

[CODE]

This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested:

Re-centrering the map around the marker

[CODE]
google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
[CODE]

Zooming in and out again to trigger the resize:

[CODE]
map.setZoom( map.getZoom() );
[CODE]

Or using this to do the same thing:

[CODE]
this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1);
[CODE]

Suggested for use if there are multiple markers:

[CODE]
map.setZoom(map.getZoom()); map.fitBounds(bounds);
[CODE]

I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help!

xelawho · 02-27-2012, 08:11 AM

I don't know anything about spry tabbed panels, but that looks like a pretty ugly way to do this (no offence intended).

If you are willing to switch to jQuery, it's quite simple:

Code:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .tab {
        height: 400px;
      }
	  #tabs {
        width: 600px;
      }
    </style>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
			<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    
  </head>
  <body>

<script type="text/javascript">

	 $(document).ready(function() {
	 marker = new google.maps.Marker();
	 $( "#tabs" ).tabs({selected: 1,
		show: function (event, ui) {
            map = new google.maps.Map(ui.panel);
			switch(ui.index){
			case 0:
			mycent=new google.maps.LatLng(40.05,-74.40);
			myzoom=10;
			break;
			case 1:
			mycent=new google.maps.LatLng(51.5313695,-0.1031838);
			myzoom=16;
			break;
			case 2:
			mycent=new google.maps.LatLng(50.7200050,-3.5368760);
			myzoom=16;
			break;
			}
			map.setOptions({zoom: myzoom, 
			center:mycent,
			mapTypeId:google.maps.MapTypeId.ROADMAP});
			marker.setOptions({map: map, position:mycent});
			}
		});
	});
	
	</script>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">South West</a></li>
		<li><a href="#tabs-2">London</a></li>
		<li><a href="#tabs-3">South East</a></li>
	</ul>
	<div class="tab" id="tabs-1">
	</div>
	<div class="tab" id="tabs-2">
	</div>
	<div class="tab" id="tabs-3">
	</div>
</div>

  </body>
</html>

kbhot · 02-27-2012, 09:50 PM

No offense taken in any way! Only used spry tabs as they were simple to set up in dreamweaver, but I have no problem using jQuery. Thank you very much for your help, I'll definitely give it a go.

kbhot · 02-28-2012, 01:41 AM

Thanks xelawho, it's so close to being sorted!

Just one more question if you don't mind:

The google maps work brilliantly, but as they are using the tabbed panels themselves as their container divs I can't place any other content in the tab. (I wanted to add contact details to the right hand side of the map)

I have tried adding a second div within the tab class="tab" with an absolute position outside the tab div and a higher z-score. I can see this div in dreamweaver but it doesn't appear in the browser.

Is there any other way of adding more contect to each tab?

New link www.kimholt.co.uk/locations (ignore the formatting of the tabs, still working on them)

Thanks

xelawho · 02-28-2012, 05:18 AM

I guess in that case you should do it the "right" way...

Code:


<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .tab {
        height: 400px;
      }
	  .mapdiv {
        height: 400px;
		width:400px;
		float:left;
      }
	  .contact {
		width:150px;
		float:right;
      }
	  #tabs {
        width: 600px;
      }
    </style>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
			<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    
  </head>
  <body>



<div id="tabs">
	<ul>
		<li><a href="#tabs-1">South West</a></li>
		<li><a href="#tabs-2">London</a></li>
		<li><a href="#tabs-3">South East</a></li>
	</ul>
	<div class="tab" id="tabs-1">
	<div class="mapdiv" id="mdiv1"></div>
	<div class="contact">South West contact details here</div>
	</div>
	<div class="tab" id="tabs-2">
	<div class="mapdiv" id="mdiv2"></div>
	<div class="contact">London contact details here</div>
	</div>
	<div class="tab" id="tabs-3">
	<div class="mapdiv" id="mdiv3"></div>
	<div class="contact">South East contact details here</div>
	</div>
</div>
<script type="text/javascript">

	 $(document).ready(function() {
	 var Opts1 = {
      zoom: 10,
      center: new google.maps.LatLng(40.05,-74.40),
      mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map1 = new google.maps.Map(document.getElementById("mdiv1"),Opts1)
	
	var Opts2 = {
      zoom: 16,
      center: new google.maps.LatLng(51.5313695,-0.1031838),
      mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map2 = new google.maps.Map(document.getElementById("mdiv2"),Opts2)
	var Opts3 = {
      zoom: 16,
      center: new google.maps.LatLng(50.7200050,-3.5368760),
      mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map3 = new google.maps.Map(document.getElementById("mdiv3"),Opts3)
	
	marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.05,-74.40), 
        map: map1
    });
	
	 $( "#tabs" ).tabs({selected: 1,
		show: function (event, ui) {
			switch(ui.index){
			case 0:
			themap=map1;
			break;
			case 1:
			themap=map2;
			break;
			case 2:
			themap=map3;
			break;
			}
			truecent=themap.getCenter()
			google.maps.event.addListenerOnce(themap, 'resize', function(){ 
			themap.setCenter(truecent); 
			}); 
			google.maps.event.trigger(themap,'resize');
			marker.setOptions({map: themap, position:truecent});
			}
		});
	});
	
	</script>
  </body>
</html>

kbhot · 02-28-2012, 01:17 PM

Thank you so much for taking the time to help me, that worked beautifully!