web-dev-qa-db-fra.com

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

Dans la version 3.14 de Google Maps, de nouvelles règles CSS ont été ajoutées pour l'infowindow personnalisé. J'utilise le plugin Infobox et maintenant beaucoup de mes styles d'éléments 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
}

Y at-il un moyen de changer cela, sauf que je dois écraser ces styles de Google via "! Important"?

MODIFIER:

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

EDIT2:

Ok, important n'est pas nécessaire. Il est également possible de remplacer les styles de Google en augmentant la spécificité des sélecteurs CSS. Mais cela ne change pas le fait que je dois écraser tous les styles de Google. Et la police roboto sera également chargée.

javascriptcssgoogle-maps
28
Philipp Kühn

De ce que je peux voir, les nouvelles règles css sont garanties pour casser le style pour tous les marqueurs, contrôles et fenêtres d’informations sur le Web, alors peut-être que cela ne restera pas dans la version 3.exp suffisamment longtemps pour faire partie d’une publication officielle. En attendant, protégez-vous contre de tels changements. Vous devriez probablement faire deux choses:

1 Définissez une version sur votre lien vers l’API de cartes. Quelque chose comme

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

s'assurera que vous accédez toujours à la version actuelle de l'API maps. Si vous voulez être plus conservateur, vous pouvez également spécifier les versions majeures et mineures. Si vous spécifiez une version majeure et une version mineure, vous pouvez tester les mises à jour de l'API Maps dans le cadre de votre calendrier de publication habituel. Si vous accédez à l'API maps dans le cadre d'une application mobile intégrée, vous ne pouvez pas contrôler le moment où vos utilisateurs mettent à jour votre application. Par conséquent, vous voudrez probablement simplement définir v = 3, puis essayer d'isoler votre application des modifications apportées aux cartes css ( voir 2. ci-dessous)

2 Créez un style pour vos marqueurs, contrôles ou fenêtres d’informations afin de mieux contrôler le style. Par exemple, si vous avez un marqueur avec HTML tel que

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

Vous pouvez empêcher l’API de cartes de définir votre taille de police par une règle css telle que

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

Remarque, étant donné les styles d’API de cartes comme

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

vous devrez spécifier les tailles absolues de vos éléments, les mesures relatives, car em ne vous protégera pas contre les modifications éventuelles, par exemple, font-size: 11px;

11
marc

J'ai eu le même problème et la réponse d'Eads a bien fonctionné pour moi après avoir ajouté 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 aucun moyen d'empêcher Google de charger la police Roboto.

EDIT: Eh bien ... il existe un moyen assez simple d’arrêter cela . Utilisez simplement GET pour charger une version plus ancienne de l’API 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 modifiera pas du tout le style gm. Vous n'avez donc pas besoin de remplacer les classes ou les styles.

5
dorr Baume
jQuery('.gm-style').removeClass('gm-style');

OU 

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

<div class="overlay-simple-marker"

et le remplacer par

<span class="overlay-simple-marker"
2
Emad Hajjar

InfoBox fournit également un élément de style dans options

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

Il s'agit d'un changement radical dans la version 3.14, car les éléments sont maintenant stylés par CSS plutôt que par les éléments en ligne.

Les polices par défaut utilisées dans les étiquettes et les éléments de l'interface utilisateur ont été modifiées. UI les éléments sont stylés avec CSS par l'API, ce qui signifie que le CSS personnalisé les cibles des éléments DOM sur la carte peuvent nécessiter quelques ajustements si vous souhaitez que ceux-ci soient appliqués à la place du nouveau style par défaut.

Voir Modifications de l'actualisation visuelle pour plus de détails.

Ce n'est pas un très bon coup de Google Maps, à cause de l'utilisation de sélecteurs de descendants (sur un enfant div!) Qui ne sont pas du tout efficaces.

Pour résoudre ce problème, vous aurez besoin de quelque chose de très spécifique comme le suivant:

HTML donné

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

Dénommer simplement div.myClass peut ne pas fonctionner.

1
Noel Abrahams

Pour ceux qui suivent ce problème, veuillez consulter le message de Google dans ce sujet: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

1
Gmap4 guy

J'ai moi aussi eu du mal avec les styles ajoutés et le chargement de polices Roboto depuis l'introduction de la version 3.14. 

Ce problème a été signalé comme un "bogue" sur la base de code de l'API Google Maps. Merci de commenter et de commenter sur http://code.google.com/p/gmaps-api-issues/issues/detail?can=2&start=0&num=100&q=font&colspec=ID%20Type%20Status%20Introduced%20Fixed % 20Summary% 20Stars% 20ApiType% 20Internal & groupby = & sort = & id = 6078

1
jpostdesign

En réponse à la solution dorr Baums, pour ceux qui utilisent le prototype js, vous pouvez utiliser ce qui suit pour supprimer cette classe.

google.maps.event.addListener(map, 'idle', function() {
        $$('.gm-style').invoke('removeClassName', 'gm-style');
});
0
Aaron Dancygier

J'ai corrigé cela sur ma carte en procédant comme suit. J'espère que ça aide

  1. Créer ma propre div à l'intérieur de l'infowindow et définir votre propre css.

<div class='iw'>infowindow content</div>

  1. Définissez le lien vers le fichier css avant! L'API Google dans l'en-tête de la page. 

  2. Maintenez la touche Ctrl & click actualiser sur votre navigateur pour forcer l'actualisation complète afin de charger les modifications CSS. J'utilisais Firefox.

0
Harry

Depuis que Google a modifié le comportement d'anciennes versions, le chargement de la v1.13 ..__ ne fonctionnera plus. Les nouveaux styles et la police roboto seront toujours chargés. Ma nouvelle solution consiste à enregistrer chaque feuille de style dans un fichier séparé et à inclure le script suivant:

google.maps.event.addListener(map, 'idle', function()
{

    $('style').remove();

});

Cela supprimera toutes les balises de style écrites par googles api et conservera votre propre style mais la police roboto sera toujours chargée. Je ne vois aucun moyen d'arrêter cela.

0
dorr Baume