Отключить стили CSS в Картах Google (3.14) Infowindow

Ответ 1

Из того, что я вижу, новые правила css гарантируют сломать стиль для всех маркеров, элементов управления и информационных окон в Интернете, поэтому, возможно, это не останется в версии 3.exp достаточно долго, чтобы стать частью официального выпуска. Тем временем, чтобы защитить себя от нарушения таких изменений. Вероятно, вы должны сделать две вещи:

1 Установите версию своей ссылки на карты api. Что-то вроде

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

убедитесь, что вы всегда получаете доступ к текущей версии API карт. Если вы хотите быть более консервативным, вы также можете указать основные и второстепенные версии. Если вы укажете основную и второстепенную версию, вы можете протестировать обновления API карт в рамках обычного расписания выпуска. Если вы обращаетесь к API карт как часть обернутого мобильного приложения, тогда вы не можете контролировать, когда ваши пользователи обновляют ваше приложение, поэтому вы, вероятно, захотите просто установить v = 3, а затем попытаться изолировать ваше приложение от изменений в картах css ( см. ниже)

2 Создайте свои маркеры, элементы управления или информационные окна, чтобы лучше управлять стилем. Например, если у вас есть маркер с html, например

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

Вы можете запретить API карт устанавливать размер шрифта с помощью правила CSS, например

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

Примечание. Приведенные в таблице типы API, такие как

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

вам нужно будет указать абсолютные размеры ваших элементов, относительные измерения, например, они не будут защищать вас от возможных изменений, например, font-size: 11px;

Ответ 2

У меня была та же проблема, и ответ Emads работал хорошо для меня после добавления слушателя событий.

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

Проблема заключается в том, что я до сих пор не вижу способа остановить загрузку Google шрифта Roboto.

EDIT: Ну... есть довольно простой способ, чтобы остановить это. Просто используйте GET для загрузки старой версии API Google, как это:

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

В этом API-интерфейсе google вообще не изменит стиль gm. Поэтому вам не нужно переопределять какие-либо классы или стили.

Ответ 3

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

ИЛИ

найти это в файле /wp-content/themes/rentbuy/js/scripts.js

<div class="overlay-simple-marker"

и замените его на

<span class="overlay-simple-marker"

Ответ 4

InfoBox также предоставляет элемент стиля в параметры

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

Ответ 5

Это взломное изменение в версии 3.14, потому что теперь элементы стилизованы CSS, а не встроенными.

Шрифты по умолчанию, используемые в ярлыках и элементах пользовательского интерфейса, изменились. UI элементы стилизованы с помощью CSS API, что означает, что пользовательский CSS для целей элементов DOM на карте могут потребоваться некоторые корректировки, если вы бы хотели, чтобы они применялись вместо нового стиля по умолчанию.

Подробнее см. изменения в визуальном обновлении.

Это не очень хороший ход с помощью карт Google из-за использования селекторов-потомков (на дочернем div!), которые совсем не эффективны.

Чтобы исправить это, вам понадобится нечто совершенно конкретное, как показано ниже:

Учитывая HTML

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

Попробуйте что-нибудь вроде

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

Просто стиль div.myClass может не работать.

Ответ 6

Я тоже борется с добавленными gm-стилями и загрузкой шрифтов Roboto с момента появления 3.14.

Обнаружено, что этот вопрос упоминается как "ошибка" в кодовой базе API Google Maps. Пожалуйста, начните и прокомментируйте это на 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

Ответ 7

Для тех, кто следит за этой проблемой, см. сообщение от google в этой теме: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/zBQ-IL5nuWs

Ответ 8

В ответ на решение dorr Baums для тех, кто использует прототип js, вы можете использовать следующие, чтобы удалить этот класс.

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

Ответ 9

Поскольку Google изменил поведение старых версий, он больше не будет работать для загрузки v1.13. Новые стили и шрифт roboto всегда будут загружаться. Моим новым решением является сохранение каждой таблицы стилей в отдельный файл и включение следующих script:

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

    $('style').remove();

});

Это приведет к удалению каждого тега стиля, написанного googles api, и сохранит ваш собственный стиль, но шрифт roboto все равно будет загружен. Я не вижу способа остановить это.

Ответ 10

Я исправил это на своей карте, выполнив следующее. Надеюсь, что это поможет.

• Создайте свой собственный div внутри infowindow и установите собственный CSS.

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

2. Установите ссылку на файл css ПЕРЕД! google api в заголовке страницы.

3. Удерживайте Ctrl и нажмите "Обновить" в браузере, чтобы принудительно обновить все изменения css. Я использовал Firefox.