2013-05-17 2 views
4

Просто попробуйте новую опцию google.maps.visualRefresh = true в новой версии 3.12 API-интерфейсов API карт Google. И хотя новый вид карты велик, теперь текст в моей InfoWindows использует размер шрифта Roboto.Google Maps visual refresh - как отключить шрифт Roboto in InfoWindow

Новое содержание InfoWindow DIV CSS является:

font-family: Roboto, Arial, sans-serif; 
font-size: 13px; 
font-weight: 300; 

Это было не так раньше, и она не работает вообще с дизайном моего сайта. Любая идея, как я могу удалить его, чтобы использовать шрифт по умолчанию, определяет в моем body?

+0

Вы, скорее всего, не можете. Попробуйте переопределить его с помощью CSS, но мои деньги связаны с тем, что Roboto является предпочтительным шрифтом Google, и все. – Kyle

ответ

7

Вы все еще можете использовать свой собственный шрифт в InfoWindow. Просто предоставляйте HTML-контент вместо обычного текста, и вы можете его стилизовать любым способом с помощью встроенного CSS или таблицы стилей. Пример в этом fiddle:

var infowindow = new google.maps.InfoWindow({ 
    map: map, 
    position: center, 
    content: '<div class="myinfo">Computer History!</div>' 
}); 

используя этот CSS:

.myinfo { font-family:Georgia,serif; font-size:18px; } 
1

содержание Использование HTML и стиль его, как предложено в this answer.

Однако вам необходимо правило CSS с более высокой специфичностью. Смотрите это fiddle (раздвоенный от Michael Gearysfiddle):

#mapbox .myinfo { font-family:Georgia,serif; font-size:18px; } 
1

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

~ Я использую SASS в примере, но вы можете катить свой собственный ванильный CSS, отбрасывая def на root и придерживаясь «на теле». здесь и там ~

html, body { 
font-family: Helvetica, Arial, sans-serif; 
# steal/borrow their own styles to be used against them. 
# in this example I have set the font to 'comical' size. 
.gm-style div, 
.gm-style span, 
.gm-style label, 
.gm-style a { font-family:Helvetica,Arial,sans-serif;font-size:200px;font-weight:2000}.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} 
} 

Этого подход подходящий хрупкий, но, безусловно, заделать Ер шатких шрифты quickedy splix. Этот ответ, вероятно, не стоит отмечать как нечто большее, чем hackshop 3.1.

0

При использовании карт your'e с помощью javascript вы можете решить это с помощью слушателя javascript. Вставьте этот фрагмент в пределах <script> тегов где-того перед тем вывод HTML Карты материала в вашем исходном коде (например, в разделе <head> как я):

var head = document.getElementsByTagName('head')[0]; 
var insertBefore = head.insertBefore; 
head.insertBefore = function (newElement, referenceElement){ 
    if(newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) { 
     console.info('Prevented Roboto font from loading!'); 
     return; 
    } 

    // intercept style elements for modern browsers 
    if(newElement.tagName.toLowerCase() === 'style' && newElement.innerHTML.indexOf('.gm-style') > -1){ 
     console.info('Prevented .gm-style from loading!'); 
     return; 
    } 
    insertBefore.call(head, newElement, referenceElement); 
}; 

Оно не будет «укус» для всех динамических нагруженных вызовов в заголовок, поскольку методы Google, используемые при различных обновлениях представлений, различаются. Это касается только метода head.insertBefore.

/Только в современных браузерах, как 2017, а не ie8 (но с модами он будет). Работает для наших случаев , но я не знаю, может ли этот метод взаимодействовать с другими вещами.

Смежные вопросы