Menu
Google adds styles to the maps container that override my styles.
I know how to fix this. But the API (v3.8/9/exp) also loads the webfont "Roboto" which I don't really need/want.
Is there any setting/option/way around this?
Can I prevent the API from adding the extra CSS?
This is the code the google-maps-API adds to the <head> of my page:
<style type="text/css"> .gm-style .gm-style-cc span, .gm-style .gm-style-cc a, .gm-style .gm-style-mtc div { font-size:10px } </style> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <style type="text/css"> @media print { .gm-style .gmnoprint, .gmnoprint { display:none } } @media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none } } </style> <style type="text/css"> .gm-style { font-family: Roboto,Arial,sans-serif; font-size: 11px; font-weight: 400; text-decoration: none } </style> 
408
Google has introduced(Opens in a new window) a new typeface called Roboto Serif that, according to its announcement, was designed to provide the optimal reading experience on practically any device. Roboto debuted as the Android system font in 2014.
Roboto is in Google's signature family of fonts, the default font on Android and Chrome OS, and the recommended font for Google's visual language, Material Design.
You won't be charged until your usage exceeds $200 in a month. Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).
You can replace the insertBefore method before the Google script invokes it:
http://jsfiddle.net/coma/7st6d9p2/
var head = document.getElementsByTagName('head')[0]; // Save the original method var insertBefore = head.insertBefore; // Replace it! head.insertBefore = function (newElement, referenceElement) { if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) { console.info('Prevented Roboto from loading!'); return; } insertBefore.call(head, newElement, referenceElement); }; // Check it! new google.maps.Map(document.getElementById('map'), { center : new google.maps.LatLng(51.508742,-0.120850), zoom : 16, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl: false, zoomControl : false, panControl : false, mapTypeControl : false }); UPDATE 10/2017
Google changed the approach of how they inject the styles on the page. Currently they inserting an empty style element and then changing the contents of this style element with Robot font. Here is a new solution:
// Preventing the Google Maps libary from downloading an extra font (function() { var isRobotoStyle = function (element) { // roboto font download if (element.href && element.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) { return true; } // roboto style elements if (element.tagName.toLowerCase() === 'style' && element.styleSheet && element.styleSheet.cssText && element.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) { element.styleSheet.cssText = ''; return true; } // roboto style elements for other browsers if (element.tagName.toLowerCase() === 'style' && element.innerHTML && element.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) { element.innerHTML = ''; return true; } // when google tries to add empty style if (element.tagName.toLowerCase() === 'style' && !element.styleSheet && !element.innerHTML) { return true; } return false; } // we override these methods only for one particular head element // default methods for other elements are not affected var head = $('head')[0]; var insertBefore = head.insertBefore; head.insertBefore = function (newElement, referenceElement) { if (!isRobotoStyle(newElement)) { insertBefore.call(head, newElement, referenceElement); } }; var appendChild = head.appendChild; head.appendChild = function (textNode) { if (!isRobotoStyle($(textNode)[0])) { appendChild.call(head, textNode); } }; })(); ORIGINAL ANSWER
Thanks to coma for the solution! I also decided to intercept styles which override the font-family, font-size and font-weight. The complete solution for modern browsers and IE8+:
// Preventing the Google Maps libary from downloading an extra font var head = $('head')[0]; var insertBefore = head.insertBefore; head.insertBefore = function (newElement, referenceElement) { // intercept font download if (newElement.href && newElement.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) { return; } // intercept style elements for IEs if (newElement.tagName.toLowerCase() === 'style' && newElement.styleSheet && newElement.styleSheet.cssText && newElement.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) { return; } // intercept style elements for other browsers if (newElement.tagName.toLowerCase() === 'style' && newElement.innerHTML && newElement.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) { return; } insertBefore.call(head, newElement, referenceElement); }; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
