kilka map google na jednej stronie Opcje

[waldemi]

Witam
Mam problem z wyświetleniem kilku map google na jednej stronie. Utworzyłem 3 DIV-y do wyświetlania map, wszystkie one znajdują się wewnątrz nadrzędnego. Po wejściu na stronę wyświetlana jest tylko pierwasza mapa a pozostałe są ukryte. Po kliknięciu na podpis pod mapa można przełączać się między nimi. Przełączanie jest realizowane przy użyciu JQUERY.
Kod strony HTML

[HTML] pobierz, plaintext 
<div id="mapy">
		    	<div id="map1">
		    		<h2>Najciekawsze obserwacje</h2>
 
		    		<div id="mapka1" style="width: 650px; height: 390px; border: 1px solid black; background: gray;"></div>
		    	</div>
		    	<div id="map2">
		    		<h2>Duże stada</h2>
 
		    		<div id="mapka2" style="width: 650px; height: 390px; border: 1px solid black; background: gray;"></div>
		    	</div>
		    	<div id="map3">
		    		<h2>Fenologia</h2>
		    		<div id="mapka3" style="width: 650px; height: 390px; border: 1px solid black; background: gray;"></div>
		    	</div>
		    	<div id="maps_nav">
		    		<span id="m1">Najciekawsze</span> | <span id="m2">Duże stada</span> | <span id="m3">Fenologiczne</span>
		    	</div>
	    	</div>
[HTML] pobierz, plaintext 

Kod JQUERY

[PHP] pobierz, plaintext 
$(document).ready(function (){
	$('#map1').show();
	$('#map2').hide();
	$('#map3').hide();
	$('#m1').click (function (){
		$('#map1').show();
		$('#map2').hide();
		$('#map3').hide();
	});
	$('#m2').click (function (){
		$('#map1').hide();
		$('#map2').show();
		$('#map3').hide();
	});
	$('#m3').click (function (){
		$('#map1').hide();
		$('#map2').hide();
		$('#map3').show();
	});
})
[PHP] pobierz, plaintext 

Skrypt do obsługi Google Maps

[PHP] pobierz, plaintext 
function mapaStart()   
							{
								var wspolrzedne = new google.maps.LatLng(51.11683194140893,17.045674324035645);
								var opcjeMapy = {
								  zoom: 7,
								  center: wspolrzedne,
								  mapTypeId: google.maps.MapTypeId.ROADMAP,
								   scaleControl: true
								};					
								var mapa = new google.maps.Map(document.getElementById("mapka1"), opcjeMapy);
 
 
								var wspolrzedne2 = new google.maps.LatLng(51.51683194140893,17.145674324035645);
								var opcjeMapy2 = {
								  zoom: 7,
								  center: wspolrzedne2,
								  mapTypeId: google.maps.MapTypeId.TERRAIN,
								   scaleControl: true
								};		
								var mapa2 = new google.maps.Map(document.getElementById("mapka2"), opcjeMapy2);
							}
.....
[PHP] pobierz, plaintext 

Przełączanie pomiędzy mapami działa bez zarzutu. Po wejściu na stronę pierwsza mapa jest w porządku ale po przełączeniu się na drugą wczytywany jest tylko niewielki fragment mapy i do tego przesunięty, tj. podane współrzędne środka wypadają daleko poza obszarem diva. Trzeciej mapy na razie nie robiłem.
Umie ktoś mi pomóc? Można to jakoś zrealizować? Docelowo na każdej mapie mają być wyświetlane markery, na każdej inne.

[Arcioch]

Witam.

Dzieje się tak ponieważ div z mapą drugą i trzecią tak na prawdę nie ma wysokości bo jest ukryty. Można to rozwiązać na trzy sposoby:

1. Zamiast używać show i hide pokazuj te mapki wszystkie a zmieniaj tylko z-index diva z mapka (IMG:style_emoticons/default/smile.gif)
2. Wraz ze zmianą diva odświeżaj i centruj na nowo mapę
3. Generuj mapkę pierwszą a drugą i trzecią dopiero po kliknięciu

Pozdrawiam (IMG:style_emoticons/default/smile.gif)
Arcio

[waldemi]

Dzięki za zinteresowanie. Zastosowałem sposób pierwszy i owszem, mapy wyświetlają się poprawnie ale jedna pod drugą zamiast jedna na drugiej.
Kod JQUERY zminiłem na

[PHP] pobierz, plaintext 
$(document).ready(function (){
	$('#map1').css('z-index','3');
	$('#map2').css('z-index', '2');
	$('#map3').css('z-index', '1');
	$('#m1').click (function (){
		$('#map1').css('z-index', '3');
		$('#map2').css('z-index', '2');
		$('#map3').css('z-index', '1');
	});
	$('#m2').click (function (){
		$('#map1').css('z-index', '2');
		$('#map2').css('z-index', '3');
		$('#map3').css('z-index', '1');
	});
	$('#m3').click (function (){
		$('#map1').css('z-index', '2');
		$('#map2').css('z-index', '1');
		$('#map3').css('z-index', '3');
	});
})
[PHP] pobierz, plaintext 

Na czym polegają sposoby 2 i 3 bo nie bardzo rozumiem?


Problem już rozwiązany. Dla poszczególnych elementów ustawiłem odpowiednie pozycjonowane i działa jak powinno.