google-maps - tomar - no puedo hacer captura de pantalla en mi celular

Google Maps API V3: problemas técnicos extraños en la pantalla de la interfaz de usuario(con captura de pantalla)

Question

Cualquier persona que tenga alguna idea sobre lo que está causando este problema extraño con los componentes de la interfaz de usuario de Google Maps, ¡se lo agradecería realmente a 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 el problema es el mismo incluso sin marcadores.

Answer 1

Bootstrap (a partir de la versión 2.3.2) se mezcla 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ó a Bootstrap, y alguien podría estar buscando una solución específica para Bootstrap.

Answer 2

Bueno, tengo la solución para esto:

En su CSS, agregó algo como:

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

trata de no hacerlo global y debería arreglarlo :)

Answer 3

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

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

Answer 4

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>

Answer 5

Me encontré con este problema en mi sitio web Square Space. No tuve acceso a la hoja de estilo CSS. Como está integrando 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 (que 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>

Answer 6

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 de img para los elementos de map_canvas de la siguiente manera:

style.css:

#map_canvas img { max-width: none; }

El control del zoom ahora se visualiza correctamente.

El ajuste "img max-width: 100%" es una técnica empleada en el diseño del sitio web sensible / fluido, de modo que las imágenes cambian de tamaño proporcionalmente cuando se cambia el tamaño del navegador. Aparentemente, algunos sistemas de cuadrícula CSS han comenzado a configurar este estilo de manera 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 ...

Answer 7

Parece un problema con el control del zoom. Intente agregar zoomControl:false a 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 de CSS?

Answer 8

si está utilizando la función de cuadrícula de fluido 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 es.