API de Google Maps - Comportamiento "Offset" de mapa extraño

Question

Estoy agregando un mapa al lado de un formulario en mi página web. La idea es que las personas se registren y cuando escriban su dirección y hagan clic en buscar, colocarán su casa, deben hacerlo antes de enviar el formulario (la geolocalización tiene un papel importante en mi sitio).

Desafortunadamente, he agregado el mapa, pero dentro de la ventana del mapa, el mapa en sí parece estar compensado. Ver la imagen de abajo para ilustrar lo que quiero decir:

que sólo puede arrastrar el mapa desde el interior de la parte "mapeado" de la caja. Si selecciono el área gris para arrastrar el mapa, falla.

¿Alguna idea de lo que podría causar esto?

EDIT:

Aquí está mi mapa-inicialización de Javascript, llamado al cargar la página.

geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(52.428385,-3.560257); 
    var myOptions = { 
     zoom: 7, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("adminMap"), myOptions); 

Aquí es mi mapa CSS

#adminMap{ 
    float:left; 
    width:270px; 
    height:370px; 
    margin-left:20px; 
} 

Aquí está mi mapa HTML

<div id="adminMap"> 
</div> 

Answer 1

He visto cosas similares a este. Sin acceso a ningún código, mi mejor opción es que el mapa se inicialice en el momento en que se oculta el contenedor div. He visto que causa esos síntomas. Intenta configurar tu mapa tal como lo muestras, en lugar de hacerlo antes.

Answer 2

Para volver a representar completamente el mapa al cambiar la visibilidad div, puede usar este código.

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

Esto devolverá su mapa dentro del div y lo mostrará completamente.