Le contrôle du zoom de Google Maps est foiré


172

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 la carte est foiré (ce n'était pas toujours comme ça). Je n'ai aucune idée de la cause.

entrez la description de l'image ici

Mettre à jour

Ce message contenait à l'origine un lien vers une page où vous pouviez afficher le problème, mais le lien est maintenant rompu, je l'ai donc supprimé.


12
Ce problème ne se produit pas avec Bootstrap si vous utilisez is map_canvas comme id div de la carte.
Ben

Réponses:


109

Votre CSS a tout gâché. Supprimez max-width: 100%;à la ligne 814 et les commandes de zoom seront à nouveau correctes. Pour éviter de tels bogues, utilisez des sélecteurs plus spécifiques dans votre CSS.


12
Cela est également vrai si vous utilisez Bootstrap de Twitter, ils ont un img {max-width: 100%} qui gâche tout. Cela devrait être corrigé dans la branche 2.0.2
Ken

1
De nombreux fichiers de réinitialisation CSS ont également img {max-width:100%;}défini.
avesse

Impressionnant! J'avais moi aussi des problèmes avec cela, et je viens de passer récemment à bootstrap css. Mucho ++++
Kevin Mansel

Eu le même problème avec jquery mobile. Ils ont .ui-mobile img {max-width: 100%;}dans leur css qui a dû être supprimé.
Jeremy

28
pour résoudre ce problème au bootstrap, donnez simplement votre classe div google-maps
Samy Massoud

80
#myMap_canvas img {
    max-width: none;
}

corrigé pour moi, mais je voulais aussi souligner le commentaire sur la question de @Ben, "Ce problème ne se produit pas avec Bootstrap si vous utilisez is map_canvas comme identifiant div de la carte". Il a raison. Je n'utilise pas Bootstrap, mais le problème a commencé à se produire après avoir changé l'ID div.

Le remettre à map_canvas l'a corrigé sans le changement de largeur maximale.

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

21

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

Comme alternative, vous pouvez tout réinitialiser pour la div google map comme une sorte de 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;
}

16

Partagez simplement la réponse @ Max-Favilli:

Avec la dernière version de l'API google maps, 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


5

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

.gmnoprint img { max-width: none; } 

4

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.


! important peut ne pas être nécessaire si votre sélecteur est plus spécifique.
voodoocode

2

Si vous utilisez le Pure CSS 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;
}

Pour autant que je sache, Pure CSS n'a aucun moyen de résoudre ce problème à lui seul.


0

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

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

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


0

J'ai essayé toutes les solutions ci-dessus et d'autres sur d'autres forums en vain. c'était vraiment ennuyeux parce que 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 commandes de zoom et Streetview étaient déformées).

La solution que j'ai faite a été de créer un nouveau fichier html (copiez-collez tout le code dans le Bloc-notes et nommez-le xyz.html, enregistrez sous le type "tous les fichiers"). Ensuite, téléchargez / ftp sur le site Web, configurez une nouvelle page Wordpress et utilisez une fonction d'intégration. Lors de l'édition de la page, allez dans l'éditeur de texte (pas dans 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, ou vous obtenez des résultats étranges.

Nous y voilà - ce n'est peut-être pas aussi intelligent que certaines autres réponses, mais cela a fonctionné pour moi! Preuve ici: http://a-bc.co.uk/latitude-longitude-finder/

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.