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

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.

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é.

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.

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

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

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

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

.gmnoprint img { max-width: none; } 

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.

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.

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!

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/