Estoy usando el Google Maps API v3 for javascript. En ciertos casos, solo veo el mapa en la esquina superior izquierda. Para ver, intente ir al http://telofast.com/telofun/#stationRanking y luego presione en una de las muchas líneas.El mapa a veces aparece solo en la esquina superior izquierda de su div
El mapa funciona cuando se cambia el tamaño del navegador, ya que el ancho y el alto se establecen correctamente y se aumenta el tamaño del evento.
La solución más rápida a su problema sería llamar al método de cambio de tamaño (a continuación) después del javascript que lo revela. ¿Quizás después de showDiv('mapDiv'); en showScoresAndCenterOn?
google.maps.event.trigger(map, 'resize');
Tuve el mismo problema que me mantuvo molestando durante unos días y hoy encontré la solución y funcionó.
En mi caso utilicé pestañas para ver diferentes partes de mi página. No fue jquery ui, lo hice. En una pestaña coloqué el código del mapa. Cuando hice clic en la pestaña de mapas, me mostró el mapa pero lo rompió. Finalmente descubrí el problema y la solución.
Para ocultar mis elementos utilicé la propiedad display:none para revelar que utilicé la propiedad display:block. Cuando el mapa de Google intentó obtener la dimensión del bloque contenedor, encontró 0 x 0 porque estaba oculto. Entonces el mapa se mostró roto.
luego cambié de CSS para la pestaña de mapa sólo para position:absolute;left:-99999px; en lugar de display:none y usados jquery añadir una clase y quitar cuando sea necesario, con las propiedades anteriores. ¡Entonces el código comenzó a funcionar! Mi mapa fue arreglado.
Para solucionar este problema, es necesario
Cambiar el tamaño del mapa
google.maps.event.trigger(map, 'resize');
centrar el mapa, donde myCenter es su lat, lng punto.
map.setCenter(myCenter);
Es un poco de un truco, pero funciona.
¿Cómo funciona 'map.setCenter (myCenter);'? debería ser 'google.maps.setCenter'? – Whitecat
Perfecto gracias, me convertí en el mismo problema. Y, de hecho, cuando pones display: ninguno, esto daría problemas al intentar ver google maps. Quité la pantalla: ninguna y la cambié hacia una posición fuera de la pantalla, cuando hago clic en un botón, esta posición cambia hacia algún lugar de la pantalla y mi mapa se muestra correctamente
establece el ancho #Div de la matriz al 100% .. es trabaja para mi.
para mi caso, lo hice por la inicialización del mapa en "show()" 's función completa: '' '$ (currentTab) .show ({ duración: 0, completa: function() { if ($ (this) .prop ('id') === 'tab-x') { map.initialize(); } } }); '' ' google.maps.event.trigger (map, 'resize') y map.resize() no funcionó en este caso. – goldsky