Search code examples
cssgoogle-mapsgoogle-maps-api-3

Google Maps v3 - prevent API from loading Roboto font


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>

Solution

  • 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
    });