Foros del Web » Programando para Internet » Jquery »

Gmaps el mapa me sale color gris

Estas en el tema de Gmaps el mapa me sale color gris en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/06/2015, 17:02
Avatar de mlopezalvarez  
Fecha de Ingreso: junio-2015
Mensajes: 1
Antigüedad: 9 años, 5 meses
Puntos: 0
Gmaps el mapa me sale color gris

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
  1. //Hago un Append del canvas
  2.  
  3.      $(".modal-body").append('<div id="map_canvas" style="width:500px; height: 300px;"></div>');
  4.  
  5.      //Llamo a la función que carga el mapa que se encuentra debajo
  6.  
  7.      $CM.load_map();
  8. }
  9. //Función que carga el mapa
  10.  
  11. load_map: function(){
  12.        
  13.        //Creo el objeto de GMaps
  14.  
  15.     var map = new GMaps({
  16.         el: '#map_canvas',
  17.         lat: -12.043333,
  18.         lng: -77.028333
  19.     });
  20.  
  21.     //Después de esto me reconfigura el width y height a 0px
  22.  
  23.  
  24.     //Vuelvo a configurar las dimensiones del Canvas   
  25.    
  26.     $("#map_canvas").css({
  27.         "width": "500px",
  28.         "height": "300px",
  29.     });
  30.  
  31.         //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
  32.                
  33. }

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

Última edición por mlopezalvarez; 13/06/2015 a las 17:42

Etiquetas: gmaps, google, javascript, maps
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 09:43.