Google Maps API V3 Gray Áreas

Question

Instalé Google Maps API V3, pero tengo problemas para que la función de ajuste de tamaño funcione correctamente. He puesto la secuencia de comandos para mostrar el mapa en una división que cae cuando se hace clic en un enlace, sin embargo, muestra áreas grises en los lados. He leído instancias en las que debe tener la función de cambio de tamaño en el script que muestra la división, por lo que puedo entender, pero estoy teniendo problemas para implementarla correctamente.

Aquí está el código que hace que la división (class = "contenido") para ser revelada:

$(function() { 
$('.action').click(function() {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    content.slideToggle('fast'); 
}); 

tengo el mapa dentro de un div con el id "mapa".

<div class="map"> 
     <div id="map_canvas""></div> 
    </div> 

He estado despierto toda la noche trabajando en otras partes del sitio y estoy bastante atolondrado en este momento. lo siento si olvidé publicar algo necesario para resolver esto.

Gracias de antemano, Bc.

Answer 1

Necesita lanzar manualmente el tamaño par en el mapa de google.

google.maps.event.trigger(map, 'resize') 

Reference.

actualización

<script type="text/javascript"> 
// Global Variable 
var map; 

// This is a global Function 
function initialize() 
{ 
    // This variable is scoped only for the initialize function, 
    // it is not available to other functions scoped globally 
    var myOptions = 
    { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Instead of a function scoped map variable this should be global 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.trigger(map, 'resize') 
} 
</script> 

A continuación, puede cambiar al siguiente código:

$(function() 
{ 
    $('.action').click(function() 
    {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    // this uses the callback functionality 
    // to only throw the trigger after the 
    // animation finishes. 
    content.slideToggle('fast', 
     function() 
     { 
     google.maps.event.trigger(map, 'resize'); 
     }); 
    }); 
}); 

Answer 2

Hey me di cuenta de una solución fácil rápida a esto:

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(42.365885, -71.258658), 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    google.maps.event.trigger(map,'resize'); 
} 

$(document).on("pageshow", "#map", function() { 
    initialize(); 
}); 

con la página div llamada "mapa" y el mapa div llamado "mapa-lienzo".

Lo que parece hacer es inicializar el mapa cuando se muestra la página. Esto hace que su aplicación sea más lenta al cargar el mapa cuando el usuario lo abre, pero evita los errores causados ​​por el dom y otras cosas. ¡Esto soluciona totalmente el problema del mapa arrinconado/áreas grises en mi aplicación de mapa de teléfono + jquery móvil + google!