在 Google 地图 (3.14) 信息窗口中禁用 CSS 样式

Disable CSS Styles in Google Maps (3.14) Infowindow

提问by Philipp Kühn

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.

在谷歌地图 3.14 版中，为自定义信息窗口添加了一些新的 css 规则。我使用信息框插件，现在我的许多元素样式都被覆盖了。

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.

字体“Roboto”也将被加载。如果你关心性能，那不是很好。

EDIT2:

编辑2：

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.

好的， !important 没有必要。通过增加 CSS 选择器的特殊性，也可以覆盖 google 样式。但这并没有改变我必须覆盖所有谷歌样式。机器人字体也会加载。

回答by marc

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:

从我所看到的，新的 css 规则保证会破坏所有标记、控件和信息窗口的样式，所以这可能不会在 3.exp 版本中保留足够长的时间成为正式版本的一部分。同时，保护您自己免受此类重大更改的影响。你可能应该做两件事：

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

1 在指向地图 api 的链接上设置一个版本。就像是

<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)

将确保您始终访问地图 API 的当前发布版本。如果您想更加保守，您也可以指定主要和次要版本。如果您指定了主要和次要版本，那么您可以将地图 API 的更新作为常规发布计划的一部分进行测试。如果您将地图 API 作为包装移动应用程序的一部分访问，那么您无法控制用户何时更新您的应用程序，因此您可能只想设置 v=3，然后尝试将您的应用程序与地图 css 中的更改隔离开来（见下面2.）

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

2 设置标记、控件或信息窗口的样式，以便更好地控制样式。例如，如果您有一个带有 html 的标记，例如

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

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

您可以通过类似的 css 规则阻止地图 API 设置字体大小

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

Note, given maps API styles like

请注意，给定地图 API 样式，例如

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

您必须指定元素的绝对大小、相对测量值，例如 em 不会保护您免受潜在更改的影响，例如 font-size: 11px;

回答by dorr Baume

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

我遇到了同样的问题，在我添加了一个事件监听器后，Emads 的回答对我来说效果很好。

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.

问题是我仍然看不到任何方法来阻止谷歌加载 Roboto 字体。

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:

编辑：嗯......有一个非常简单的方法来阻止它。只需使用 GET 加载旧版本的 google API，如下所示：

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

在这个 API 版本中，google 根本不会改变 gm 样式。所以你不需要覆盖任何类或样式。

回答by Jaykishan

InfoBox also provides style element in options

InfoBox 还在选项中提供了样式元素

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

回答by Emad Hajjar

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

OR

或者

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

在文件/wp-content/themes/rentbuy/js/scripts.js 中找到它

<div class="overlay-simple-marker"

and replace it with

并将其替换为

<span class="overlay-simple-marker"

回答by Gmap4 guy

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

对于关注此问题的人，请参阅谷歌在此线程中的帖子：https: //groups.google.com/forum/#!topic/google-maps-js-api-v3/ zBQ-IL5nuWs

回答by Noel Abrahams

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

这是 3.14 版中的重大更改，因为元素现在由 CSS 而不是内联样式。

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.

标签和 UI 元素中使用的默认字体已更改。UI 元素通过 API 使用 CSS 进行样式设置，这意味着如果您希望应用这些而不是新的默认样式，则针对地图上的 DOM 元素的自定义 CSS 可能需要进行一些调整。

See changes in visual refreshfor 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.

这不是谷歌地图的一个很好的举措，因为使用了后代选择器（在 div 子节点上！），这根本没有效率。

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

要解决此问题，您将需要一些非常具体的内容，如下所示：

Given HTML

给定 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.

简单地样式化 div.myClass 可能不起作用。

回答by jpostdesign

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

自从 3.14 引入以来，我也一直在为添加的 gm-styles 和 Roboto 字体加载而苦苦挣扎。

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

在谷歌地图 API 代码库中发现此问题报告为“错误”。请在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

回答by Aaron Dancygier

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

针对 dorr Baums 的解决方案，对于那些使用原型 js 的人，您可以使用以下内容删除此类。

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

回答by dorr Baume

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 更改了旧版本的行为，因此无法再加载 v1.13。新样式和机器人字体将始终加载。我的新解决方案是将每个样式表保存到一个单独的文件中，并包含以下脚本：

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.

这将删除由 googles api 编写的每个样式标签并保留您自己的样式，但仍会加载机器人字体。我看不出有什么办法可以阻止它。

回答by Harry

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.

1. 在信息窗口中创建我自己的 div 并设置你自己的 css。

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

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

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

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

2. 在此之前设置指向 css 文件的链接！页头中的 google api。

3. 按住 Ctrl 并单击浏览器上的刷新以强制完全刷新以加载任何 css 更改。我正在使用 Firefox。