Frage Google Maps v3 - verhindert, dass die Roboto-Schriftart von der API geladen wird


Google fügt dem Kartencontainer Stile hinzu, die meine Stile überschreiben.
Ich weiß, wie ich das beheben kann. Aber die API (v3.8 / 9 / exp) lädt auch den Webfont "Roboto", den ich nicht wirklich brauche / brauche.

Gibt es irgendwelche Einstellungen / Optionen / Möglichkeiten?
Kann ich verhindern, dass die API zusätzliches CSS hinzufügt?

Dies ist der Code, den die Google-Maps-API dem hinzugefügt hat <head> meiner Seite:

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

31
2017-08-27 09:41


Ursprung


Antworten:


Sie können die insertBefore-Methode ersetzen, bevor das Google-Skript sie aufruft:

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

58
2017-09-18 00:06



UPDATE 10/2017

Google änderte den Ansatz, wie sie die Stile auf der Seite einfügen. Derzeit fügen sie ein leeres ein style Element und dann ändern Sie den Inhalt dieses Stilelements mit Robot Schriftart. Hier ist eine neue Lösung:

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

Dank an Koma für die Lösung! Ich habe mich auch entschieden, Stile zu ignorieren, die die Schriftart-Familie, Schriftgröße und Schriftstärke außer Kraft setzen. Die Komplettlösung für moderne Browser und 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);
};

11
2018-03-14 16:33



Ich habe obige Lösung gefunden, um zu verhindern, dass Websites mit Google Maps Roboto laden.

Wenn Sie - wie ich - Wordpress verwenden, könnte es andere Plugins geben, die sich auf Google Fonts beziehen.

Allerdings habe ich auf einigen meiner Webseiten mit dem obigen Code gekämpft, da Teile davon (1) auch andere Stile zum Laden betrafen, (2) "getötete" Stile, die absichtlich nicht nur gm-Stil enthielten, sondern auch andere Stile und (3) nicht betroffen andere Google Fonts zu laden, wo das eine oder andere Plugin Links zu fonts.googleapis.com per DOM-Manipulation hinzugefügt.

Das Folgende funktionierte für mich. Es verhindert einfach, dass andere Skripte irgendwelche Tags hinzufügen https://fonts.googleapis.com in seinem href-Attribut.

(function($) {
var isGoogleFont = function (element) {
    // google font download
    if (element.href
        && element.href.indexOf('https://fonts.googleapis.com') === 0) {
        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 (!isGoogleFont(newElement)) {
        insertBefore.call(head, newElement, referenceElement);
    }
};

var appendChild = head.appendChild;
head.appendChild = function (textNode) {
    if (!isGoogleFont($(textNode)[0])) {
        appendChild.call(head, textNode);
    }
};
})(jQuery);

0
2018-06-22 08:11