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.

For example:

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

Is there any way to change that except that I have to overwrite this google styles via "!important"?

EDIT:

The font "Roboto" will be also loaded. If you care about performance, then that is not really great.

EDIT2:

Ok, !important isn't necessary. Overwriting the google styles is also possible with increasing the specificity of the CSS selectors. But this doesn't change that I have to overwrite all google styles. And the roboto font will loaded too.

Answer 1

From what I can see the new css rules are guaranteed to break styling for all markers, controls and info windows web wide, so maybe this will not remain in the 3.exp version long enough become part of an official release. In the meantime to protect you self against breaking changes like this. You should probably do two things:

1 Set a version on your link to the maps api. Something like

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

will make sure that you are always accessing the current release version of the maps API. If you want to be more conservative you can specify the major and minor releases as well. If you specify a major and minor version then you can test updates to the maps API as part of your regular release schedule. If you are accessing the maps API as part of a wrapped mobile application then you cant control when your users update your app, so you will probably want to just set v=3 and then try to insulate your app from changes in the maps css (see 2. below)

2 Style your markers, controls, or info windows so that you better control the styling. For example, if you have a marker with html like

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

You can prevent the maps API from setting you font size by a css rule like

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

Note, given maps API styles like

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

you will have to specify the absolute sizes of you elements, relative measurements, like em's wont protect you against potential changes to, for example, font-size: 11px;

Answer 2

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 3

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

OR

find this in file /wp-content/themes/rentbuy/js/scripts.js

<div class="overlay-simple-marker"

and replace it with

<span class="overlay-simple-marker"

Answer 4

InfoBox also provides style element in options

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

Answer 5

For those following this issue, please see the post by google in this thread: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

Answer 6

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 7

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