Google maps sale en gris

[byrong]

Tengo un problema con el google maps, el mapa esta en un toggle y no se si esto tenga algo que ver, estuve buscando en internet y dice que sí, pero no veo manera de solucionarlo ya que el mapa sale el fondo totalmente en gris es cuando la página ha cargado por completo, ya que si abro el div que contiene el mapa antes de que haya cargado por completo el mapa si se ve bien y carga, y si lo abro antes se ve en gris, el toggle esta así:

Código Javascript:

<script language="javascript" type="text/javascript">
            $(document).ready(function(){
                $(".contenido").hide();
                $("#planes").change(function(){
                $(".contenido").hide();
                     $("#div_" + $(this).val()).toggle("slow", function(){
                      google.maps.event.trigger(map, 'resize').show();
                  });
                });
            });
        </script>
 

Todo funciona bien, excepto lo del mapa, acá está el código que tengo en mapa.js:

Código Javascript:

function localizame() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }
        
        function coordenadas(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
        }
function getCoords(marker){ 
    document.getElementById("latitud").value=''+marker.getPosition().lat(); 
      document.getElementById("longitud").value=''+marker.getPosition().lng(); 
} 
function initialize() { 
    var myLatlng = new google.maps.LatLng(9.314299432752295,-70.60566794257812); 
    var myOptions = { 
        zoom: 17, 
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     
   marker = new google.maps.Marker({ 
          position: myLatlng, 
          draggable: true, 
          title:"Descubrelo" 
    }); 
    google.maps.event.addListener(marker, "dragend", function() { 
                    getCoords(marker); 
    }); 
     
      marker.setMap(map); 
    getCoords(marker); 
     
   
  }
 

Saludos

[leugimsiul]

Buenas,

Estás declarando la variable "map" como local de la función "initialize" pero luego accedes a ella para lanzar el trigger resize como si fuera global. ¿O es que has asignado esta variable en otra parte de código que no has puesto?

Aparte de eso, creo que el ".show()" del trigger no es necesario. Prueba por ahí.

Saludos!

[byrong]

Iniciado por leugimsiul

Buenas,

Estás declarando la variable "map" como local de la función "initialize" pero luego accedes a ella para lanzar el trigger resize como si fuera global. ¿O es que has asignado esta variable en otra parte de código que no has puesto?

Aparte de eso, creo que el ".show()" del trigger no es necesario. Prueba por ahí.

Saludos!

Ready bro, gracias. Para el que necesite después, fue porque el mapa estaba en un div escondido, en el trigger e hice lo siguiente:

Código Javascript:

$(document).ready(function(){
                $(".contenido").hide();
                $("#planes").change(function(){
                $(".contenido").hide();
                     $("#div_" + $(this).val()).toggle("slow", function(){
                      google.maps.event.trigger(initialize(), 'resize');
                  });
                });
            });
 

Puse el initialize de esa manera para que cargue bien, saludos.