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

对于关注此问题的人，请参阅谷歌在此线程中的帖子： 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

Answer 8

In response to dorr Baums solution, for those using prototype js you can use the following to remove this class.

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

Answer 9

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.

Answer 10

I fixed this on my map by doing the following. Hope it helps

1. Create my own div inside the infowindow and set your own css.

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

2. Set the link to the css file BEFORE! the google api in the page head.

3. Hold Ctrl & click refresh on your browser to force full refresh to load any css changes. I was using Firefox.

Answer 11

Instead of removing the class through DOM manipulations and instead of using an older Google Maps version which is obviously mostly unwanted, simple deactivate the style globally by resetting the font attribute:

.gm-style { font: initial !important; }

or put your Google Map into a container and style .gm-style inside your container:

<div class="MapContainer">
  [google map component here]
</div>

and in your CSS style definitions:

.MapContainer .gm-style { font: initial; }