Google Maps API V3: des défauts d’affichage étranges de l’interface utilisateur (avec capture d’écran)

N’importe qui avec des idées sur ce qui cause ce problème étrange avec les composants d’interface de Google Maps, soyez vraiment reconnaissant d’avoir de vos nouvelles!

entrer la description de l'image ici

la carte est créée avec:

var options = { zoom: zoom ?>, center: new google.maps.LatLng(centre_lat ?>, centre_lon ?>), mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

et le pépin est le même, même sans marqueurs.

Nous avons rencontré le même problème. Le concepteur css utilisait ce style:

style.css

 img {max-width: 100%; } 

Au lieu de désactiver le contrôle de zoom, nous avons résolu le problème en remplaçant le style img des éléments map_canvas comme suit:

style.css:

 #map_canvas img { max-width: none; } 

La commande de zoom s’affiche désormais correctement.

La définition de “img max-width: 100%” est une technique utilisée dans la conception de sites Web réactifs / fluides afin que les images soient redimensionnées proportionnellement lorsque le navigateur est redimensionné. Apparemment, certains systèmes de grid css ont commencé à définir ce style par défaut. Plus d’infos sur les images fluides ici: http://www.alistapart.com/articles/fluid-images/ Je ne sais pas pourquoi cela est en conflit avec la carte google …

Avec la dernière version de Google Maps, vous avez besoin de ceci:

  

Ressemble à un problème avec la commande de zoom. Essayez d’append zoomControl:false à vos options.

En fait, il semble que le curseur de zoom normal soit positionné à gauche de la page (utilisez Firebug> Inspect Element). Peut-être un conflit CSS?

Eh bien, j’ai le correctif pour cela:

Sur votre CSS, vous avez ajouté quelque chose comme:

 img {max-width: 100%; height: auto;} 

essayez de ne pas le rendre global et il devrait vous réparer 🙂

Cela a fonctionné pour moi:

 #map img { max-width: none !important; } (from Pasortingck's answer) 

L’atsortingbut “! important” s’assure de remplacer tout autre style, #map est l’ID assigné lorsque vous déclarez le nouvel object Gmaps:

  

Si vous utilisez la fonction de grid fluide 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.

Bootstrap (à partir de la version 2.3.2) perturbe les images de la même manière que dans la réponse acceptée.

En fait, je soupçonne que le design utilisé sur le site Web de Haroldo utilise Bootstrap.

Je ne fais que poster ceci parce que personne d’autre n’a mentionné Bootstrap, et quelqu’un pourrait chercher une solution spécifique à Bootstrap.

J’ai rencontré ce problème sur mon site Web Square Space. Je n’ai pas eu access à la feuille de style CSS. Puisque vous intégrez un document HTML, vous pouvez simplement utiliser le CSS en ligne pour résoudre le problème. J’ai modifié le style du conteneur au lieu de modifier le site (ce que je ne pouvais pas faire). Voici ce que j’ai fait: