javascript - icon - google maps markers infowindow

Deshabilitar estilos CSS en Google Maps(3.14) Infowindow

Question

En la versión 3.14 de google maps, se han agregado algunas reglas CSS nuevas para la ventana de información personalizada. Uso el complemento de infobox y ahora muchos de mis estilos de elementos se sobrescriben.

Por ejemplo:

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

¿Hay alguna manera de cambiar eso, excepto que tengo que sobrescribir estos estilos de google a través de "! Important"?

EDITAR:

La fuente "Roboto" también se cargará. Si te preocupa el rendimiento, entonces eso no es realmente genial.

EDIT2:

Ok,! Importante no es necesario. Sobrescribir los estilos de google también es posible al aumentar la especificidad de los selectores de CSS. Pero esto no cambia, tengo que sobrescribir todos los estilos de google. Y la fuente de roboto también se cargará.

Answer 1

Como Google cambió el comportamiento de las versiones anteriores, ya no funciona para cargar v1.13. Los nuevos estilos y roboto-font siempre se cargarán. Mi nueva solución es guardar cada hoja de estilo en un archivo separado e incluir la siguiente secuencia de comandos:

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

    $(''style'').remove();

});

Esto eliminará todas las etiquetas de estilo escritas por Google api y mantendrá su propio estilo de guardado, pero la fuente de roboto seguirá cargándose. No veo ninguna forma de detener eso.

Answer 2

En respuesta a la solución de dorr Baums, para aquellos que usan prototipos js pueden usar lo siguiente para eliminar esta clase.

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

Answer 3

Este es un cambio radical en la versión 3.14, porque los elementos están ahora diseñados por CSS en lugar de en línea.

Las fuentes predeterminadas utilizadas en etiquetas y elementos de la interfaz de usuario han cambiado. Los elementos de la interfaz de usuario están diseñados con CSS por la API, lo que significa que los CSS personalizados que se dirigen a elementos DOM en el mapa pueden requerir algunos ajustes si desea que se apliquen en lugar del nuevo estilo predeterminado.

Vea los cambios en la actualización visual para más detalles.

Este no es un movimiento muy bueno por los mapas de Google, debido al uso de selectores descendientes (¡en un niño div!), Que no son para nada eficientes.

Para solucionar esto, necesitará algo bastante específico como el siguiente:

Dado HTML

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

Pruebe algo como

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

Simplemente diseñar div.myClass puede no funcionar.

Answer 4

InfoBox también proporciona elementos de estilo en las options

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

Answer 5

Lo arreglé en mi mapa haciendo lo siguiente. Espero eso ayude

1. Crea mi propio div dentro de la ventana de información y establece tu propio css.

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

2. Establezca el enlace al archivo css ANTES! la API de Google en el encabezado de la página.

3. Mantenga presionada la tecla Ctrl y haga clic en actualizar en su navegador para forzar la actualización completa para cargar cualquier cambio de CSS. Estaba usando Firefox.

Answer 6

Para quienes siguen este problema, vean la publicación de google en este hilo: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

Answer 7

Por lo que puedo ver, las nuevas reglas CSS están garantizadas para romper el estilo de todos los marcadores, controles y ventanas de información en toda la web, por lo que tal vez esto no permanezca en la versión 3.exp el tiempo suficiente para convertirse en parte de un lanzamiento oficial. Mientras tanto, para protegerse contra los cambios bruscos como este. Probablemente deberías hacer dos cosas:

1 Establezca una versión en su enlace a la API de mapas. Algo como

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

se asegurará de que siempre esté accediendo a la versión actual de la API de mapas. Si quieres ser más conservador, puedes especificar las versiones principales y secundarias también. Si especifica una versión mayor y menor, puede probar las actualizaciones de la API de mapas como parte de su calendario de lanzamiento regular. Si está accediendo a la API de mapas como parte de una aplicación móvil envuelta, entonces no puede controlar cuándo los usuarios actualizan su aplicación, por lo que probablemente solo desee configurar v = 3 y luego intente aislar su aplicación de los cambios en la CSS de mapas ( ver 2. abajo)

2 Diseñe sus marcadores, controles o ventanas de información para que pueda controlar mejor el diseño. Por ejemplo, si tiene un marcador con html como

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

Puede evitar que la API de mapas le configure el tamaño de fuente mediante una regla de CSS como

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

Tenga en cuenta que, dados los estilos de API de mapas como

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

tendrá que especificar los tamaños absolutos de sus elementos, las medidas relativas, como las de que no lo protegerán contra posibles cambios, por ejemplo, font-size: 11px;

Answer 8

Tuve el mismo problema y la respuesta de Emads funcionó bien después de agregar un oyente de evento.

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

El problema es que todavía no veo ninguna forma de detener la carga de Google de la fuente Roboto.

EDITAR: Bueno ... hay una forma bastante fácil de detener eso. Simplemente use GET para cargar una versión anterior de la API de Google de esta manera:

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

En esta versión API, google no cambiará el estilo gm en absoluto. Por lo tanto, no es necesario que anule ninguna clase o estilo.

Answer 9

Yo también he estado luchando con los gm-styles añadidos y la carga de la fuente Roboto desde que se introdujo 3.14.

Se ha detectado este problema como un "error" en la base de código API de google maps. Destaque y comente en 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

Answer 10

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

O

encuentra esto en el archivo /wp-content/themes/rentbuy/js/scripts.js

<div class="overlay-simple-marker"

y reemplazarlo con

<span class="overlay-simple-marker"