Strumenti di Google Maps api v3: distorsioni visive?

Ho appena notato che gli strumenti di visualizzazione di gMap sono visualizzati ... piuttosto insolitamente. Le loro regioni sembrano ancora ben definite: riesco a interagire con loro, è solo il loro aspetto che sembra incasinato.Strumenti di Google Maps api v3: distorsioni visive?

Non ho applicato alcun CSS a nessuna delle parti della mappa e l'unico css che ho applicato al contenitore della mappa è width:100%; height:100%; z-index:0; (che normalmente faccio).

io ho altri elementi della pagina che hanno position:absolute; e position:fixed; e alcuni alti z-index s (500 & 1000). È possibile che stiano causando la distorsione visiva degli strumenti della mappa?

Vedo la stessa strana distorsione visiva nelle ultime versioni di Chrome, Chrome Canary, Ffx, Safari e Opera (su Mac OSX).

Ho controllato gli strumenti di sviluppo/firebug e nessun CSS inatteso viene applicato al contenitore della mappa o direttamente ai suoi strumenti.

Google Maps Api v3: Map interface tools

Ecco l'esatto HTML (ho messo a nudo gli altri elementi e css e la stranezza succede ancora):

<html style="width:100%;height:100%;"> 
    <head> 
     <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css"> 
     <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css"> 
     <script 
      type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?key=..."> 
     </script> 
     <script type="text/javascript"> 
      function ginit() { 
       var vancouver = new google.maps.LatLng(49.285415,-123.114982); 
       var mapOptions = { 
        center: vancouver, 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(
        document.getElementById("map"), 
        mapOptions 
       ); 
       var infowindow = new google.maps.InfoWindow(), 
        marker; 
      }//ginit() 
     </script> 
    </head> 
    <body onload="ginit();" style="width:100%;height:100%;"> 
     <div id="map" style="width:100%;height:100%;"></div> 
    </body> 
</html>

EDIT: Sembra che la questione è venuta da la combinazione di Foundation e Bootstrap: rimuovere uno dei due risolve il problema. Inoltre, non importa che nessun elemento nella pagina faccia riferimento alle classi delle librerie, esso provoca la distorsione lo stesso.

Ho provato a mettere questo in un violino, ma non ho potuto ottenere jsfiddle.net per caricare.

fonte

2012-12-19 jacob

Proprio questo nuovo progetto? Tutti i progetti? Su un computer? Tutti i computer? Possiamo vedere una demo? Non c'è molto da fare qui altrimenti. – Sparky

Al momento sto solo lavorando su un progetto. E l'ho provato su 2 computer: OSX 10.6 e 10.8. Sto lavorando su un violino idiota (ci sono un sacco di cose quadro che devo spogliare), ma ho problemi ad accedere a jsfiddle.net. – jacob

Sì, per qualche motivo jsFiddle è molto lento in questo momento. Stai facendo la cosa giusta realizzando una demo, ma questo è esattamente il motivo per cui le domande non dovrebbero fare affidamento _solely_ su jsFiddle per mostrare il loro codice. – Sparky

Per i futuri utenti che affrontano lo stesso problema, ecco la soluzione.

#map img{max-width: inherit;}

Come altre risposte ha detto che è un problema con larghezza massima.

fonte

2013-01-13 18:50:03

'#map img {larghezza massima: inherit! Important; max-height: inherit! important} ' –

Set di avvio e fondotinta { img max-width:100% } per tele Google Maps. Ciò fa apparire i controlli di Maps distorti. Alterare il css per essere max-width:none;. [source]

Caveat: A quanto pare img { max-width: 100% … } è integrale per le immagini auto-ridimensiona per layout reattivi, in modo da utilizzare con cautela. [source]

fonte

2012-12-20 00:48:35 jacob

Sì, # map-tela img { max-width :nessuna; } risolto questo per me. –

Fondamenta 5 non solo interrompe gmap, ma interrompe anche MapQuest. Fortunatamente entrambi i Goomap & Quest hanno una classe che ci consente di sovraccaricare F5 solo per la visualizzazione delle mappe.

.google-map { 
    height: 400px; // no default height 
    color: #191970; // default color for both text and background is white !!! 
} 

.quest-map { 
    height:400px; 
    color: #191970; 
} 

// Fix Foundation bug with MapQuest 
.mqa-display { 
    img {max-width: none;} 
    label { width: auto; display: inline; } 
} 

// Fix Foundation bug with GoogleMap 
.gm-style { 
    img { max-width: none; } 
    label { width: auto; display: inline; } 
}

fonte

2015-02-18 14:36:44 Fulup

Strumenti di Google Maps api v3: distorsioni visive?

risposta

Problemi correlati