javascript - Google マップの CSS が自分のスタイルを上書きしてしまいます。これを防ぐにはどうすればいいですか？

私は Typescript と一緒に Angular 7.2.2 を使用しています。

私は index.html の <script> タグを通じて "https://maps.googleapis.com/maps/api/js?key=myAPIkey" から Google マップをインポートしています

スクリプトの読み込みが完了するとすぐに、Google マップのスタイルによってアプリケーション全体で自分のスタイルの一部が上書きされているのが見えます。

これを防ぎ、Googleマップのスタイルが私がマップをレンダリングするコンポーネントにのみ適用されるようにするにはどうすればいいですか？

表示コンポーネント内からスクリプトを動的に読み込もうとしましたが、明らかにスタイルのカプセル化は「styleUrls」パラメータによって提供されるスタイルにのみ適用されます。

ありがとうございます！

回答 #1

ありがとう、みんな。自分の質問の答えが分かったと思います。

他の誰かがその愚かな間違いにつまずく場合に備えて：

私はAngular Materialを使用しており、これによりデフォルトのフォントとしてRoboto Mediumが使用されます。

正しいウェブフォントをインストールしなかったので、私のアプリケーションはフォールバックとしてArialを使用しました。

今、Googleマップのスクリプトを読み込むと、Robotoも使用していてそのフォントを正しく読み込むため、アプリケーション全体がArialからRobotoに切り替わります。

それで、スタイルが上書きされているのだと思いました。

（そして、私の下手な文章を対応してくれてありがとう、ローレンツ :) ）

回答 #2

あなたのAngularアプリで使用しているクラスは、Google Maps APIのスタイルで使われているものと同じ名前になっています。

スタイルは、angular.json ファイルに記載された順序でインポートされます。その後、index.html ファイルは初期化後にスクリプトを読み込みます。これは、angular.json からスタイルシートが読み込まれた後に行われます。

ですので、あなたの選択肢は上書きされているクラスの名前を変更して、Googleがそれらを上書きしないようにすることのようです。私は現在のGoogleマップに対応して常に更新されるGoogleマップ用のNPMパッケージを知りませんが、もしそれを見つければ、それも動作するかもしれません。