API di Google Maps V3: l’interfaccia utente strana visualizza i glitch (con screenshot)

Chiunque abbia qualche idea su ciò che sta causando questo strano problema con i componenti dell’interfaccia utente di google maps, sii davvero grato di sentirti!

inserisci la descrizione dell'immagine qui

la mappa è stata creata con:

var options = { zoom: zoom ?>, center: new google.maps.LatLng(centre_lat ?>, centre_lon ?>), mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

e il problema tecnico è lo stesso anche senza indicatori.

Abbiamo incontrato lo stesso problema. Il designer css stava usando questo stile:

style.css

 img {max-width: 100%; } 

Invece di disabilitare il controllo zoom, abbiamo risolto il problema sostituendo lo stile img per gli elementi map_canvas in questo modo:

style.css:

 #map_canvas img { max-width: none; } 

Il controllo zoom ora viene visualizzato correttamente.

L’impostazione “img max-width: 100%” è una tecnica utilizzata nella progettazione di siti Web reattivi / fluidi in modo che le immagini vengano ridimensionate proporzionalmente quando il browser viene ridimensionato. Apparentemente alcuni sistemi di grid css hanno iniziato a impostare questo stile di default. Maggiori informazioni sulle immagini fluide qui: http://www.alistapart.com/articles/fluid-images/ Non sono sicuro perché questo sia in conflitto con la mappa di google …

Con l’ultima versione di google maps api hai bisogno di questo:

  

Sembra un problema con il controllo zoom. Prova ad aggiungere zoomControl:false alle tue opzioni.

In effetti sembra che il normale cursore dello zoom sia posizionato a sinistra della pagina (usa Firebug> Ispeziona elemento). Potrebbe essere un conflitto CSS?

Bene ho trovato la soluzione per questo:

Sul tuo CSS hai aggiunto qualcosa del tipo:

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

prova a non renderlo globale e dovresti risolverlo 🙂

Questo ha funzionato per me:

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

l’attributo “! important” fa in modo di sovrascrivere qualsiasi altro stile, #map è l’ID assegnato quando dichiari il nuovo object Gmaps:

  

se si utilizza la funzione di griglia fluida di Dreamweaver, l’impostazione predefinita dovrebbe essere simile a questa:

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

Prova questo:

 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%; } 

basta sostituire il codice così com’è.

Bootstrap (dalla versione 2.3.2) mette in disordine le immagini allo stesso modo della risposta accettata.

In realtà, sospetto che il design utilizzato nel sito Web di Haroldo utilizzi Bootstrap.

Sto solo postando questo perché nessun altro ha menzionato Bootstrap, e qualcuno potrebbe essere alla ricerca di una soluzione specifica per Bootstrap.

Mi sono imbattuto in questo problema sul mio sito web Square Space. Non ho avuto accesso al foglio di stile CSS. Dato che stai incorporando un documento html, puoi semplicemente utilizzare CSS in linea per risolvere il problema. Ho modificato lo stile del contenitore invece di apportare modifiche a tutto il sito (cosa che non potevo fare). Ecco cosa ho fatto: