Google map's css overrides my own styles, how can I prevent that?

Question

I'm using Angular 7.2.2 with Typescript.

I'm importing Google Maps from " https://maps.googleapis.com/maps/api/js?key=myAPIkey " via <script> -tag in my index.html

As soon as the script has finished loading, I can see some of my styles being overwritten application wide by Google Map's styles.

How can I prevent this and ensure that Google Map's styles are only applied to the component in which I will render the map?

I have tried to load the script dynamically from within the displaying component, but obviously the style encapsulation works only for styles provided by the "styleUrls" parameter.

Thank you!

Answer 1

So the classes you are using in your angular app are named the same thing in the styles from the Google Maps API.

Your styles are imported in the order that you have them in your angular.json file, then your index.html file loads its' scripts once it is initialized which happens after your style sheets from angular.json is read.

So it seems your option is to change the name of the classes that are being overwritten so that Google does not overwrite them because I do not know of an NPM Package for Google Maps that is kept up to date with the current Google Maps, but if you find one, that might work too.

Answer 2

Thanks guys, I think I have the answer to my question.

In case anyone else stumbles over that stupid mistake:

I use Angular Material which in turn uses Roboto Medium as a default font.

Since I didn't install the correct webfont, my application used Arial as a fallback.

Now when I load the Google Maps script, which also uses Roboto and loads that font correctly, my whole application switches from Arial to Roboto.

That made me think that styles are overwritten.

(And thanks Lorenz for handling my poor writing :))