Saludos a todos, estoy teniendo un problema al intentar colocar un mapa con la libreria Gmaps.js dentro de una ventana modal de bootstrap. Estoy utilizando un JQuery externo el cual estoy programando las funciones de la plataforma. Para dar un poco de teoría, estoy introduciendo un div (canvas) con un ID dentro de una ventana modal y una vez esta cargue llamo a la función que se encarga de crear el objeto GMaps para obtener el mapa. Lo que esta sucediendo es que el canvas en donde estoy poniendo el mapa una vez crea el objeto Gmaps, pone los valores de width y height en 0px y tengo que ajustarle el CSS después que carga y por eso el mapa queda color gris. Ya le puse al canvas un atributo style="width: 500px; height: 300px;" y de todos modos cuando crea el objeto Gmaps coloca los valores de width y height a 0px, obligándome a ajustar el CSS después de instanciar el objeto GMaps.
Ejemplo:
Suponiendo que ya hice clic en el botón que se encarga de abrir la ventana modal bootstrap:
Código Javascript
:
Ver original//Hago un Append del canvas
$(".modal-body").append('<div id="map_canvas" style="width:500px; height: 300px;"></div>');
//Llamo a la función que carga el mapa que se encuentra debajo
$CM.load_map();
}
//Función que carga el mapa
load_map: function(){
//Creo el objeto de GMaps
var map = new GMaps({
el: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
//Después de esto me reconfigura el width y height a 0px
//Vuelvo a configurar las dimensiones del Canvas
$("#map_canvas").css({
"width": "500px",
"height": "300px",
});
//Aparece el mapa y se ven los botones pero el recuedro aparece gris sin que se vean las carreteras etc... Cuando arrastro el mapa se ve un cuadro pequeno del mapa pero nunca se ve completo
}
Nota: También le coloque al canvas las dimensiones en una hoja de CSS pero sigue con el mismo problema.
Nota: Cuando abro el inspector element en Chrome que cambian las dimensiones de la pantalla, el mapa se ve perfecto, pero solo cuando pasa eso