Foros del Web » Programando para Internet » Javascript »

Problema position div al crear mapa google maps v3

Estas en el tema de Problema position div al crear mapa google maps v3 en el foro de Javascript en Foros del Web. Hola a todos. Estoy creando un mapa de google map API v3. Tengo una imagen pequeña y cuando hago click en la imagen dibujo el ...
  #1 (permalink)  
Antiguo 02/07/2012, 06:15
 
Fecha de Ingreso: enero-2007
Mensajes: 17
Antigüedad: 17 años, 10 meses
Puntos: 0
Problema position div al crear mapa google maps v3

Hola a todos.

Estoy creando un mapa de google map API v3. Tengo una imagen pequeña y cuando hago click en la imagen dibujo el mapa en otra capa que estaba oculta.

El problema que tengo, es que la capa donde dibujo el mapa la defino como fixed para que aparezca en el centro de la pantalla, pero despues de crear el mapa esta pasa a position:relative y me descuadra la posición de la capa.

Aqui os dejo el código que tengo:

Al hacer click aquí muestro el mapa.
Código:
<img " class="verMapa" src="imagen/mini_map.jpg"  />
Aqui defino la capa donde veo el mapa, una capa con opacidad de tota la pantalla y otra capa donde muestro el mapa.

Código:
<div>
    <div id="mask" style="display:none; background-color:#000000; position:absolute; right:0; top:0; z-index:9000;"></div>
		
    <div id="capaMapa" style= "display:none; background-color:red; position:fixed; top:50%; left:50%; width:600px; height:400px; margin-top:-200px; margin-left:-300px;z-index:9900;"></div>
</div>
Código Javascript donde muestro la capa, utilizo JQUERY.

Código:
$(".verMapa").click(function(){	
		                
		initialize(40, 2);		
		
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
		
		//Set height and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth, 'height':maskHeight});
		
		//transition effect
		$('#mask').fadeIn(1000);
		$('#mask').fadeTo("slow", 0.5);
		
		//transition effect
		$('#capaMapa').fadeIn(2000);
						
    });

function initialize(latitud, longitud) {			  
				
	myOptions = {
		zoom: 14,
		center: new google.maps.LatLng(latitud, longitud),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}

	//inicializamos el mapa.
	map = new google.maps.Map(document.getElementById("capaMapa"), myOptions);	
}
No se porque despues de " map = new google.maps.Map(document.getElementById("capaMapa" ), myOptions);" me cambia la position de fixed a relative en la capa "capaMapa" y me descuadra todo el diseño.

Alguna sugerencia?

Gracias.

Etiquetas: fixed, google, map, position
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:23.