Il controllo dello zoom di Google Maps è incasinato

Uso l'API di Google Maps (v.3) per mostrare una mappa con un paio di marcatori. Di recente ho notato che il controllo utilizzato per ingrandire la mappa è incasinato (non è sempre stato così). Non ho idea di quale sia la causa.

Aggiornare

Questo post originariamente aveva un collegamento a una pagina in cui era possibile visualizzare il problema, ma ora il collegamento è interrotto, quindi l'ho rimosso.

Il tuo CSS l'ha incasinato. Rimuovi max-width: 100%;nella riga 814 e i controlli dello zoom torneranno a essere perfetti. Per evitare tali bug, utilizza selettori più specifici nel tuo CSS.

#myMap_canvas img {
    max-width: none;
}

risolto il problema per me, ma volevo anche sottolineare il commento sulla domanda di @Ben, "Questo problema non si verifica con Bootstrap se si utilizza is map_canvas come ID div della mappa". Ha ragione. Non sto usando Bootstrap, ma il problema ha iniziato a verificarsi dopo aver modificato l'ID div.

Impostandolo su map_canvas, è stato risolto senza la modifica della larghezza massima.

<div id="map_canvas"></div>

Se stai usando Bootstrap, dagli solo la classe "google-maps". Questo ha funzionato per me.

In alternativa, è possibile reimpostare tutto per il div di google map come una soluzione di ultima istanza:

HTML:

<div class="mappins-map"><div> 

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

Basta condividere la risposta di @ Max-Favilli:

Con l'ultima versione di Google Maps API avete bisogno di questo:

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

Grazie a @ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

Se sei un utente Bootstrap di Twitter dovresti aggiungere questa linea al tuo CSS:

.gmnoprint img { max-width: none; } 

Ho avuto anche questo problema e utilizzo

.google-maps img {
    max-width: none;
}

non ha funzionato. Alla fine l'ho usato

.google-maps img {
    max-width: none !important;
}

e ha funzionato come un fascino.

Se stai usando il CSS puro di Yahoo, dai al tuo div la classe "google-maps" come Bootstrap e inserisci questa regola nel tuo CSS:

.google-maps img {
    max-width: none;
    max-height: none;
}

Per quanto ne so, Pure CSS non ha modo di risolvere da solo questo problema.

Quelle opzioni che mi avete detto non funzionavano per il mio sito web.

Uso Bootstrap V3 e mi concentro sulla funzionalità. Il motivo principale era che avevo assegnato alla mia mappa un ID diverso rispetto al file CSS utilizzato per visualizzare la barra dello zoom con il ragazzo giallo streetvieuw

Ho rinominato map_canvas in mapholder e poi ha funzionato per me! Grazie comunque per i suggerimenti che dovrei guardare nei file CSS!

Ho provato tutte le soluzioni di cui sopra e altre da altri forum senza risultati. è stato davvero fastidioso perché ho un altro sito non Wordpress in cui il codice ha funzionato perfettamente. (Stavo cercando di visualizzare una mappa di Google in una pagina di Wordpress, ma i controlli di zoom e Streetview erano distorti).

La soluzione che ho fatto è stata quella di creare un nuovo file html (copia incolla tutto il codice in Blocco note e chiamalo xyz.html, salvalo come tipo "tutti i file"). Quindi caricalo / ftp fino al sito Web, imposta una nuova pagina di Wordpress e usa una funzione di incorporamento. Quando modifichi la pagina vai all'editor di testo (non all'editor visivo) e copia / digita:

http: // page URL width = "900" height = "950">

Se si modificano le dimensioni, ricordarsi di modificarlo in entrambi gli argomenti sopra o si ottengono risultati strani.

Eccoci: potrebbe non essere intelligente come altre risposte, ma ha funzionato per me! Prova qui: http://a-bc.co.uk/latitude-longitude-finder/