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