Disable CSS Styles in Google Maps (3.14) Infowindow

Question

In google maps version 3.14 there are some new css rules added for the custom infowindow. I use the infobox plugin and now many of my elements styles are overwritten.

Fo

Answer 1

I had the same problem and Emads answer worked well for me after I addet a event listener.

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

The problem is I still can't see any way to stop google loading the Roboto font.

EDIT: Well... there is a pretty easy way, to stop that. Just use GET to load an older version of the google API like this:

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

In this API verion, google won't change the gm-style at all. So you don't need to override any classes or styles.

Answer 2

InfoBox also provides style element in options

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

Answer 3

I too have been struggling with the added gm-styles and Roboto font loading since 3.14 was introduced.

Found this issue reported as a "bug" on the google maps API codebase. Please star and comment on it at 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 4

This is a breaking change in version 3.14, because the elements are now styled by CSS rather than inline.

The default fonts used in labels and UI elements has changed. UI elements are styled with CSS by the API, which means that custom CSS that targets DOM elements on the map may require some adjustments if you would like these to apply instead of the new default styling.

See changes in visual refresh for further details.

This is not a very good move by Google maps, because of the use of descendant selectors (on a div child!), which are not at all efficient.

To fix this you will need something quite specific like the following:

Given HTML

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

Try something like

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

Simply styling div.myClass may not work.

Answer 5

Since Google changed the behavior of older versions it wont work anymore to load v1.13. The new styles and roboto-font will always load. My new solution is to save every stylesheet into a separate file and include the following script:

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

    $('style').remove();

});

This will remove every style-tag written by googles api and keeps your own style save but the roboto font will still be loaded. I don't see any way to stop that.