Just trying the new option google.maps.visualRefresh = true in the new version 3.12 of the Google maps javascript API. And although the map new look is great, now the text in my InfoWindows is using the font size Roboto.
The new InfoWindow content div CSS is:
font-family: Roboto, Arial, sans-serif;
font-size: 13px;
font-weight: 300;
This wasn't the case before and it doesn't work at all with the design of my website. Any idea how I could remove it to use the default font define in my body?
Just trying the new option google.maps.visualRefresh = true in the new version 3.12 of the Google maps javascript API. And although the map new look is great, now the text in my InfoWindows is using the font size Roboto.
The new InfoWindow content div CSS is:
font-family: Roboto, Arial, sans-serif;
font-size: 13px;
font-weight: 300;
This wasn't the case before and it doesn't work at all with the design of my website. Any idea how I could remove it to use the default font define in my body?
- You most likely can't. Try overriding it with CSS, but my money is on the fact that Roboto is Google's preferred font and that's that. – Kyle Commented May 17, 2013 at 16:00
4 Answers
Reset to default 8You can still use your own font in an InfoWindow. Simply provide HTML content instead of plain text, and you can style it any way you want with inline CSS or a stylesheet. Example in this fiddle:
var infowindow = new google.maps.InfoWindow({
map: map,
position: center,
content: '<div class="myinfo">Computer History!</div>'
});
using this CSS:
.myinfo { font-family:Georgia,serif; font-size:18px; }
Use HTML content and style it like suggested in this answer.
However, you need a CSS rule with higher specificity. See this fiddle (forked from Michael Gearys fiddle):
#mapbox .myinfo { font-family:Georgia,serif; font-size:18px; }
If you are quite lazy, as I am, you can out-specifitize Google by one-upping them. Simply redefine their own nefarious style attached to your body definition.
~ I am using SASS in the example but you can roll your own vanilla CSS by dropping the def's to root and tackin' on a 'body.' here and there ~
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 'ical' 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}
}
This approach is suitably brittle but will definitely patch up yer wonky fonts quickedy splix. This answer is probably not worth being marked as anything more than hackshop 3.1.
While using maps your'e using javascript, you can solve this with javascript listener. Paste this snippet within <script> tags somewhere before the output of MAP html stuff in your sourcecode (e.g. within the <head> section as I do):
var head = document.getElementsByTagName('head')[0];
var insertBefore = head.insertBefore;
head.insertBefore = function (newElement, referenceElement){
if(newElement.href && newElement.href.indexOf('//fonts.googleapis./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);
};
It will not "bite" for all dynamic loaded calls into the header, cos the methods Google use on various updates of the views differ. This only cover the head.insertBefore method.
/ Only in modern browsers as 2017, not ie8 (but with mods it will). Works for our cases but I dont know if this method interfear with other stuff.