Google map V3 position div fixed change relative

Question

Firstly, sorry for my English, because it is not good.

I have a problem with google map. I am trying to get a map in a div, and I want this div with the position: fixed.

My problem is to draw a map, because change the position of the div. Initially fixed and after the relative is drawn and reposition the div.

Here is my HTML code

<div class="verMapa"> SEE MAP </div> <br><br><br> <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:white; position:fixed; top:50%; left:50%; width:600px; height:400px; margin-top:-200px; margin-left:-300px;z-index:9900;"> </div> </div> 

CODE Javascript

 var map = null; $(document).ready(function(){ //Evento click en Mask que cierra el mapa. $("#mask").click(function(){ $('#mask').hide(); $('#capaMapa').hide(); $('#capaMapa').html(""); }); //Evento click en ver mapa $(".verMapa").click(function(){ //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); initialize(40, -1); }); }); 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); } 

After clicking en "see map" I see the map correctly, but in the error position, if I see the code in firebug. the style in the capaMapa div has changed, and now the position: relative, and this div is displayed at the error position.

I saw that this change after map initialization, "map = new google.maps.Map (document.getElementById (" capaMapa "), myOptions); because if I comment on this line, draw a div in the correct position.

Any suggestion?

Answer 1

The DOM element containing the map ( #capaMapa in your example) will always have position: relative; . Try including it in another element that you can use as you wish:

 <div id="capaMapa"><div id="map-canvas"></div></div> 

Your CSS:

 #capaMapa { display:none; background-color:white; position:fixed; top:50%; left:50%; width:600px; height:400px; margin-top:-200px; margin-left:-300px; z-index:9900; } #map-canvas { position: relative; /* Will be set by the Maps API anyway */ width: 100%; height: 100%; }