Google Karte Zoom-Steuerelemente werden nicht korrekt angezeigt

Question

Ich habe eine einfache Karte mit API3 erstellt. Die Zoom-Steuerelemente oben links sehen jedoch "Squashed" aus - sie werden nicht richtig angezeigt. Der Rest der Karte ist in Ordnung. Das Seltsame ist, dass ich die gleiche Methode wie für frühere Seiten verwendet habe, wo die Dinge gut funktionieren.

Hier einige Code:

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var marker; 
var markersArray=[]; 
var html; //to create urls 
var directionsVisible = new Boolean(); 
directionsVisible = false; 

function initialize() {  
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var orchards = new google.maps.LatLng(52.512805,-2.76007); 
    var myOptions = { 
     zoom:14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: orchards, 
     panControl: false 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    addMarker(orchards); 
} 

Bitte kann jemand empfehlen, was falsch ist?

Answer 1

Die Frage wegen img { max-width: 100%; } universal sein sollte

versuchen diese in Ihrem css

.gmnoprint img { 
    max-width: none; 
} 

Answer 2

, wenn Sie die Dreamweaver verwenden Fluid Grid-Funktion Ihre Standard sollte wie folgt aussehen einrichten:

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

Try this:

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

Ersetzen Sie einfach den Code wie er ist.

Answer 3

Zunächst Gesicht mir gleiches Problem, dann später ich

google.maps.event.addDomListener (Fenster, 'load', initialisieren) realisieren;

spielen sehr wichtige Rolle.

Ich habe es hinzugefügt und für mich funktioniert es.

Kaufabwicklung folgenden Code.

CSS-Code

<style> 
     #divmap { 
     height: 300px; 
     width:100%; 
     margin: 10px; 
     padding: 10px; 

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

Für JS

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 

<script> 

     function initialize() { 
     var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(21,78), 
     panControl:true, 
     zoomControl:true, 
     mapTypeControl:true, 
     scaleControl:true, 
     streetViewControl:true, 
     overviewMapControl:true, 
     rotateControl:true 
     } 
     var map = new google.maps.Map(document.getElementById("divmap"), 
      mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

und letzte html

<div id="divmap"></div>