web-dev-qa-db-fra.com

Le contrôle de zoom de Google Maps est perturbé

J'utilise l'API Google Maps (v.3) pour afficher une carte avec quelques marqueurs. J'ai récemment remarqué que le contrôle utilisé pour zoomer sur la carte était foiré (ce n'était pas toujours comme ça). Je n'ai aucune idée de la cause.

enter image description here

Mise à jour

Ce message contenait à l'origine un lien vers une page sur laquelle vous pouviez voir le problème, mais le lien est cassé, je l'ai donc supprimé.

javascriptcssgoogle-maps
173
Dónal

Votre CSS a tout gâché. Retirer max-width: 100%; sur la ligne 814 et les commandes de zoom auront à nouveau une belle apparence. Pour éviter de tels bugs, utilisez des sélecteurs plus spécifiques dans votre CSS.

109
Konrad Dzwinel
#myMap_canvas img {
    max-width: none;
}

résolu le problème pour moi, mais je voulais aussi souligner le commentaire de @Ben sur la question: "Ce problème ne se produit pas avec Bootstrap si vous utilisez is is map_canvas en tant que div div id ". Il a raison. Je n’utilise pas Bootstrap, mais le problème a commencé à se produire après avoir changé le div id.

Le rétablir dans map_canvas l'a corrigé sans le changement de largeur maximale.

<div id="map_canvas"></div>
80
Aligned

Si vous utilisez Bootstrap, donnez-lui simplement la classe "google-maps". Cela a fonctionné pour moi.

Vous pouvez également tout réinitialiser pour Google Map div en tant que solution de dernier recours:

HTML:

<div class="mappins-map"><div>

CSS:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
21
woens

Il suffit de partager @ Max-Favilli répondre:

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

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

Merci à @ Max-Favilli

https://stackoverflow.com/a/19339767/3070027

16
poostchi

Si vous êtes un utilisateur de Twitter Bootstrap), vous devez ajouter cette ligne à votre CSS:

.gmnoprint img { max-width: none; }
5
Fernando Prieto

J'ai eu ce problème aussi et en utilisant

.google-maps img {
    max-width: none;
}

n'a pas fonctionné. J'ai finalement utilisé

.google-maps img {
    max-width: none !important;
}

et ça a fonctionné comme un charme.

4
Dylan Becks

Si vous utilisez le CSS pur de Yahoo, donnez à votre div la classe "google-maps" comme Bootstrap, et mettez cette règle dans votre CSS:

.google-maps img {
    max-width: none;
    max-height: none;
}

Autant que je sache, Pure CSS ne dispose d'aucun moyen de résoudre ce problème.

2
dmzza

J'ai essayé toutes les solutions ci-dessus, et d'autres sur d'autres forums, en vain. c'était vraiment énervant car j'ai un autre site non-Wordpress où le code fonctionnait parfaitement. (J'essayais d'afficher une carte Google dans une page Wordpress, mais les contrôles de zoom et Streetview étaient déformés).

La solution que j'ai faite était de créer un nouveau fichier html (copier coller tout le code dans le bloc-notes et nommez-le xyz.html, enregistrez sous le type "tous les fichiers"). Puis chargez-le/ftp sur le site Web et configurez une nouvelle page Wordpress) et utilisez une fonction d'intégration. Lorsque vous modifiez la page, accédez à l'éditeur de texte (et non à l'éditeur visuel) et copiez/tapez:

http: // page URL width = "900" height = "950">

Si vous changez les dimensions, n'oubliez pas de le changer dans les deux arguments ci-dessus, sinon vous obtiendrez des résultats étranges.

On y va - peut-être pas aussi intelligent que d'autres réponses, mais ça a fonctionné pour moi! Preuves ici: http://a-bc.co.uk/latitude-longitude-Finder/

0
Glyn

Ces options que vous m'avez dit ne fonctionnaient pas pour mon site Web.

J'utilise Bootstrap V3 et me concentrais sur les fonctionnalités. La raison principale était que j'avais donné à ma carte un identifiant différent de celui du fichier CSS utilisé pour afficher la barre de zoom avec le personnage jaune de streetvieuw

J'ai renommé map_canvas en mapholder, puis cela a fonctionné pour moi! Merci quand même pour les conseils que je devrais regarder dans les fichiers CSS!

0
Impiriumjbb