Google Maps API V3: extraños fallos en la visualización de la interfaz de usuario (con captura de pantalla)

Cualquiera que tenga alguna idea sobre lo que está causando este extraño problema con los componentes de la interfaz de usuario de Google Maps, ¡agradecería mucho saber de usted!

el mapa se crea con:

        var options = {
        zoom: <?php echo $this->zoom ?>,
        center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
            mapTypeControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP                
        }; 

        var map = new google.maps.Map(document.getElementById('map_canvas'), options);

y la falla es la misma incluso sin marcadores.

Nos encontramos con el mismo problema. El diseñador de CSS estaba usando este estilo:

style.css

img {max-width: 100%; }

En lugar de deshabilitar el control de zoom, solucionamos el problema anulando el estilo img para los elementos map_canvas de la siguiente manera:

style.css:

#map_canvas img { max-width: none; }

El control de zoom ahora se muestra correctamente.

Configurar "img max-width: 100%" es una técnica empleada en el diseño de sitios web receptivos / fluidos para que las imágenes cambien de tamaño proporcionalmente cuando se cambie el tamaño del navegador. Aparentemente, algunos sistemas de cuadrícula CSS han comenzado a configurar este estilo de forma predeterminada. Más información sobre imágenes fluidas aquí: http://www.alistapart.com/articles/fluid-images/ No estoy seguro de por qué esto entra en conflicto con el mapa de Google ...

Con la última versión de la API de Google Maps, necesita esto:

<style>
  .gm-style img { max-width: none; }
  .gm-style label { width: auto; display: inline; }
</style>

Parece un problema con el control de zoom. Intente agregar zoomControl:falsea sus opciones.

De hecho, parece que el control deslizante de zoom normal está ubicado a la izquierda de la página (use Firebug> Inspeccionar elemento). ¿Podría ser un conflicto CSS?

Bueno, tengo la solución para esto:

En su CSS agregó algo como:

img {max-width: 100%; height: auto;}

intenta no hacerlo global y debería arreglarte :)

Esto funcionó para mí:

#map img { max-width: none !important; } (from Patrick's answer)

el atributo "! important" se asegura de anular cualquier otro estilo, #map es la identificación asignada cuando declaras el nuevo objeto Gmaps:

<script>
    map = new GMaps({
          div: '#map',           <-  your id
          lat:  *******,
          lng:  *******,
          scrollwheel: false,
          panControl: true,
          ....
          ...
</script>

Si está utilizando la función de cuadrícula fluida de Dreamweaver, su configuración predeterminada debería verse así:

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

Prueba esto:

object, embed, video {
    max-width: 100%;
}
#map_canvas img { max-width: none; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

simplemente reemplace el código tal como está.

Bootstrap (a partir de la versión 2.3.2) se mete con las imágenes de la misma manera que en la respuesta aceptada.

De hecho, sospecho que el diseño utilizado en el sitio web de Haroldo usa Bootstrap.

Solo estoy publicando esto porque nadie más mencionó Bootstrap, y alguien podría estar buscando una solución específica de Bootstrap.

Me encontré con este problema en mi sitio web Square Space. No tuve acceso a la hoja de estilo CSS. Dado que está incrustando un documento html, puede usar CSS en línea para solucionar el problema. Modifiqué el estilo del contenedor en lugar de hacer un cambio en todo el sitio (lo cual no pude hacer). Aquí esta lo que hice:

<style>
  html, body, #map-canvas {
    height: 600px;
    width: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas img {max-width: none;}
</style>