Disable the loading of Google Font when loading Google Map API

google-fonts-loading-disable.directive.ts

import { Directive } from '@angular/core';


@Directive({
  selector: '[appGoogleFontsLoadingDisable]'
})
export class GoogleFontsLoadingDisableDirective {
  constructor() {
    const head = document.getElementsByTagName('head')[0] as any;
    const insertBefore = head.insertBefore;
    head.insertBefore = function (newElement: any, referenceElement: any) {
      if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
        return;
      }
      insertBefore.call(head, newElement, referenceElement);
    };
  }
}

Thanks!

In case you don't like "any" in your code, here's a more typed version:

import { Directive } from "@angular/core";

@Directive({
  selector: "[appGoogleFontsLoadingDisable]",
})
export class GoogleFontsLoadingDisableDirective {
  constructor() {
    const head = document.getElementsByTagName("head")[0];
    const insertBefore = head.insertBefore;
    head.insertBefore = function (newElement: Node, referenceElement: Node) {
      const newHTMLLinkElement = newElement as HTMLLinkElement;
      if (newHTMLLinkElement.href && newHTMLLinkElement.href.indexOf("//fonts.googleapis.com/") > -1) {
        return null;
      }
      insertBefore.call(head, newElement, referenceElement);
    };
  }
}

Then add the appGoogleFontsLoadingDisable to your google-map tag like so:

<google-map appGoogleFontsLoadingDisable [height]="'100%'" [width]="'100%'" [options]="options">