google map controles de zoom que no se muestran correctamente

Question

He creado un mapa simple usando API3. Sin embargo, los controles de zoom en la parte superior izquierda se ven "aplastados", es decir, no se muestran correctamente. El resto del mapa está bien. Lo extraño es que he usado el mismo método que para sitios anteriores, donde las cosas funcionan bien.

Aquí hay algo de código:

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

favor puede alguien sugerir qué pasa?

Answer 1

La cuestión debería ser causa de universales img { max-width: 100%; }

Trate de éste en su css

.gmnoprint img { 
    max-width: none; 
} 

Answer 2

si está utilizando la función de cuadrícula fluida Dreamweaver su defecto configurado debería tener este aspecto:

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 está.

Answer 3

Inicialmente se enfrentan el mismo problema, y ​​luego más tarde me di cuenta

google.maps.event.addDomListener (ventana, 'carga', inicializar);

juegan un papel muy importante.

Lo agregué y para mí funciona.

Pagar el código siguiente.

código CSS

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

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

Para 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> 

y final de HTML

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