Désactiver les Styles CSS dans Google Maps (3.14) Infowindow

Question

Dans google maps version 3.14 il y a quelques nouvelles règles css ajouté à la douane infowindow. J'ai utiliser l'infobox plugin et maintenant beaucoup de mes éléments de styles sont écrasés.

Par exemple:

.gm-style div,.gm-style span,.gm-style label,.gm-style a {
    font-family: Roboto,Arial,sans-serif; 
    font-size:11px;
    font-weight:400
}

.gm-style div,.gm-style span,.gm-style label {
    text-decoration:none
}

.gm-style a,.gm-style label {
    display:inline
}

.gm-style div {
    display:block
}

.gm-style img {
    border: 0; 
    padding: 0;
    margin: 0
}

Est-il possible de changer cela, sauf que j'ai remplacer cette google styles via "!important"?

EDIT:

La police "Roboto" sera également chargé. Si vous vous souciez de performance, ce n'est pas vraiment génial.

EDIT2:

Ok, !important n'est pas nécessaire. L'écrasement de la google style est aussi possible avec l'augmentation de la spécificité des sélecteurs CSS. Mais cela ne change pas que j'ai remplacer tous les google styles. Et la police roboto sera chargé trop.

Answer 1

De ce que je peux voir les nouvelles règles css sont garantis pour casser style pour tous les marqueurs, les commandes et infos web windows de large, peut-être que ce ne sera pas rester dans le 3.exp version assez longtemps dans un communiqué officiel. En attendant de vous protéger vous-même contre la rupture de tels changements. Vous devriez probablement faire deux choses:

1 Jeu un version sur votre lien de la maps api. Quelque chose comme

<script src="http://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&sensor=true" type="text/javascript"></script>

sera assurez-vous que vous êtes toujours accès à la version la plus récente version de l'API des cartes. Si vous voulez être plus conservateur que vous pouvez spécifier la majeure et la mineure de presse ainsi. Si vous spécifiez une version principale et secondaire, alors vous pouvez tester les mises à jour de l'API des cartes dans le cadre de votre calendrier de publication. Si vous accédez à des cartes de l'API dans le cadre d'un enveloppé application mobile, alors vous ne pouvez pas contrôler quand à vos utilisateurs de mettre à jour votre application, vous aurez probablement à juste set v=3 et puis essayez d'isoler votre application à partir des changements dans les cartes css (voir la section 2. ci-dessous)

2 Style de vos marqueurs, des commandes ou des info windows afin de mieux contrôler le style. Par exemple, si vous avez un marqueur html comme

<div class="my-marker">...</div>

Vous pouvez empêcher l'API des cartes de paramètre de taille de police par une règle css comme

div.my-marker {
  font-size: 18px;
  ...
}

Remarque, étant donné maps API styles comme

.gm-style div {
  font-size: 11px;
  ...
}

vous devrez spécifier les dimensions absolues des éléments, des mesures relatives, comme em ne sera pas vous protéger contre d'éventuelles modifications, par exemple, font-size: 11px;

Answer 2

J'ai eu le même problème et Emads réponse a bien fonctionné pour moi, après j'ai addet un écouteur d'événement.

google.maps.event.addListener(map, 'idle', function()
{
    jQuery('.gm-style').removeClass('gm-style');
});

Le problème est que je ne vois toujours pas un moyen pour arrêter de google chargement de la police Roboto.

EDIT: eh Bien... il y a une manière assez facile, à un arrêt. Utilisez simplement OBTENIR pour charger une ancienne version de l'API de google comme ceci:

<script src="http://maps.google.com/maps/api/js?v=3.13&sensor=false"></script>

Dans cette version de l'API, google ne va pas changer la gm de style à tous. Si vous n'avez pas besoin de remplacer toutes les classes ou les styles.

Answer 3

jQuery('.gm-style').removeClass('gm-style');

OU

trouver dans le fichier /wp-content/themes/rentbuy/js/scripts.js

<div class="overlay-simple-marker"

et de le remplacer avec

<span class="overlay-simple-marker"

Answer 4

InfoBox fournit également de l'élément de style dans les options

var labelOptions = {
  content: label,
  boxStyle: {
  //Insert style here
  },
  .
  .
}

Answer 5

C'est une modification importante dans la version 3.14, parce que les éléments sont maintenant de style en CSS plutôt que dans la ligne.

Les polices par défaut utilisé dans les étiquettes et les éléments de l'INTERFACE utilisateur a changé. L'INTERFACE utilisateur les éléments sont en forme avec CSS par l'API, ce qui signifie que CSS personnalisé que les objectifs des éléments du DOM sur la carte peut nécessiter quelques ajustements, si vous voulez que celles-ci s'appliquent à la place de la nouvelle valeur par défaut du style.

Voir changements dans visual actualiser pour plus de détails.

Ce n'est pas une très bonne initiative de Google maps, en raison de l'utilisation de descendant sélecteurs (sur un div enfant!), qui ne sont pas du tout efficace.

Pour corriger cela, vous aurez besoin de quelque chose de tout à fait spécifiques, tels que les suivants:

Compte tenu de HTML

<div class="gm-style">
 <div class="myClass-parent">
    <div class="myClass">Lorem ipsum dolor</div>
 </div>
</div>

Essayez quelque chose comme

.myClass-parent > div.myClass 
{
  font-weight:600;
}

Tout simplement le style div.myClass peut ne pas fonctionner.