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:
Aqui defino la capa donde veo el mapa, una capa con opacidad de tota la pantalla y otra capa donde muestro el mapa.<img " class="verMapa" src="imagen/mini_map.jpg" />
Código:
Código Javascript donde muestro la capa, utilizo JQUERY.<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:
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.$(".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); }
Alguna sugerencia?
Gracias.