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

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 2

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 3

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 4

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 5

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

Answer 6

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;