Les contrôles de zoom de Google Map ne s'affichent pas correctement

Question

J'ai créé une carte simple en utilisant API3. Cependant, les commandes de zoom en haut à gauche ont un aspect "écrasé" - elles ne s'affichent pas correctement. Le reste de la carte va bien. La chose étrange est que j'ai utilisé la même méthode que pour les sites précédents, où les choses fonctionnent bien.

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

S'il vous plaît quelqu'un peut-il suggérer ce qui ne va pas?

Answer 1

La question devrait être à cause de l'universel img { max-width: 100%; }

Essayez celui-ci dans votre css

 .gmnoprint img {
    max-width: none; 
}
 

Answer 2

D'abord, je fais face à un même problème, puis plus tard, je me rends compte

google.cartes.de l'événement.addDomListener(window, 'load', initialiser);

jouent rôle très important.

Je l'ai ajouté et pour moi, il fonctionne.

La caisse de code suivant.

Le code CSS

#divmap { hauteur: 300px; width:100%; margin: 10px; padding: 10px;

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

Pour le 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>

et html final

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

Answer 3

Si vous utilisez la fonction de grille fluide de Dreamweaver, votre configuration par défaut devrait ressembler à ceci:

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

Essaye ça:

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

il suffit de remplacer le code tel quel.