Google Maps v3 - impedisce all'API di caricare il carattere Roboto

Google aggiunge gli stili al contenitore delle mappe che sovrascrivono i miei stili.
So come risolvere questo problema. Ma l'API (v3.8/9/exp) carica anche il webfont "Roboto" che non ho davvero bisogno/voglio.Google Maps v3 - impedisce all'API di caricare il carattere Roboto

C'è qualche impostazione/opzione/strada intorno a questo?
È possibile impedire all'API di aggiungere il CSS aggiuntivo?

Questo è il codice del google-maps-API aggiunge alla <head> della mia pagina:

<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>

fonte

2014-08-27 pkyeck

È l'uscita? È difficile dire a cosa si riferisce il codice stesso. –

@JoshBurgess sì, questo è ciò che Google aggiunge al '' quando si includono le mappe-api-javascript – pkyeck

In mancanza di una versione precedente di gmapsAPI, non riesco a trovare un modo per impedire a Roboto di arrivare senza bloccare le richieste a quel dominio da Apache, IIS o qualsiasi altra cosa tu stia usando. Se è abbastanza, lo inserirò in una risposta, ma a me sembra una vera sbirro. –

è possibile sostituire il metodo insertBefore prima che lo script di Google l'invoca:

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

fonte

2014-09-18 00:06:32 coma

grazie per la risposta. speravo in qualche tipo di opzione-API che potevi usare ma questo 'hack' funziona sicuramente :) – pkyeck

Non ho trovato nulla sui loro documenti, suppongo che vogliano preservare il suo stile. A proposito, una volta che il caricamento del font è stato impedito, è possibile annullare la modifica per ignorarlo se su ogni insertBefore call. – coma

fantastico! e risparmia la larghezza di banda della rete! –

AGGIORNAMENTO 10/2017

Google ha cambiato l'approccio di come iniettano gli stili sulla pagina. Attualmente inseriscono un elemento style vuoto e quindi modificano il contenuto di questo elemento di stile con il carattere Robot. Ecco una nuova soluzione:

// 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); 
     } 
    }; 
})();

RISPOSTA ORIGINALE

Grazie alla coma per la soluzione! Ho anche deciso di intercettare gli stili che sovrascrivono la famiglia di font, la dimensione del font e il peso del font. La soluzione completa per i browser moderni e 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); 
};

fonte

2016-03-14 16:33:54

Google Maps v3 - impedisce all'API di caricare il carattere Roboto

risposta

Problemi correlati