ベスト プラクティス

JS のベスト プラクティス

Maps JavaScript API は、標準の ECMAScript と W3C DOM 環境でのみ機能します。そのため、ブラウザで提供されている組み込みのクラスやオブジェクトの動作を変更またはオーバーライドすると、Maps JavaScript API が機能しなくなる場合があります。ブラウザの動作が変更され、標準の ECMAScript 環境ではなくなることで、他のライブラリが Maps JavaScript API と競合する場合があります。Maps JavaScript API には、そうしたライブラリとの互換性がありません。

Maps JavaScript API と互換性がないことがわかっているライブラリは次のとおりです。

  • Prototype: 標準ではない形で Array.from() と Element.prototype.remove() をオーバーライドします。
  • MooTools（旧バージョン）: 標準ではない形で Array.from() をオーバーライドします。
  • DateJS（旧バージョン）: 標準ではない形で Date.now() をオーバーライドします。

互換性のないライブラリを変更して、標準ではないオーバーライドを削除できる場合もあります。

CSS のベスト プラクティス

Maps JavaScript API を使用して地図を追加またはカスタマイズすると、ウェブページに適用したスタイルの一部によって、地図のスタイルがオーバーライドされ、CSS の競合が発生することがあります。スタイル設定に CSS フレームワークや JavaScript コンポーネントを使用している場合は、地図のスタイルで CSS の競合が追加で発生することがあります。

ブラウザ間のレンダリングの違いに対処するため、CSS フレームワークと JavaScript スタイル設定コンポーネントでは、多くの場合、CSS リセットまたはノーマライザが使用されます。フレームワークでは、box-sizing 要素によてウェブページの要素の余白や境界が調整されるのが一般的です。多くの場合、これには、デフォルトのブラウザの動作を、content-box を使用する形から border-box を使用する形に変更することが含まれます。

このタイプの CSS リセットによって、Maps JavaScript API と CSS の競合が生じる場合があります。この API はユーザー エージェント スタイルシートの変更に対応していないためです。フレームワークまたはコンポーネントが Maps JavaScript API の CSS クラスまたは DOM 要素を参照している場合は、CSS の競合が追加で発生する場合があります。

このような競合を回避するための推奨事項は次のとおりです。

詳細度

埋め込まれてリンクされた CSS は、Google マップのスタイルよりも前に地図に適用されます。すべてのページスタイルが埋め込み CSS またはリンクされた CSS で定義されている場合は、詳細度のルールに沿って、正しいスタイルが地図に適用されるようにします。

img、button、a などの一般的な CSS 要素は、ページのスタイルによって上書きされる場合があります。よくあるシナリオの 1 つは、img 要素の max-width 属性が 100% に設定されている場合です。これにより、特に InfoWindow を使用している場合に、地図のコンポーネントが歪んだり見えなくなったりすることがあります。

この問題を修正するには、地図の img 要素を更新して、max-width 属性を none に設定します。例は次のとおりです。

#map img
{
    max-width : none;
}

クラス名

JavaScript Maps API のクラス名と内部 DOM 要素を参照しないでください。この設定には対応していないため、事前の通知なしでウェブサイトに互換性を破る変更が加えられる場合があります。その代わりに、独自の CSS クラスを地図のコンテナとして作成することをおすすめします。

CSS フレームワークや JavaScript コンポーネントで、このようなタイプの参照が使用されている場合は、Google が推奨するボックスサイズのオーバーライドで問題を回避できることがあります。

CSS ボックスサイズのオーバーライド

CSS ボックスサイズのオーバーライドで、地図のスタイルの競合を回避できる場合があります。これは、CSS フレームワークや JavaScript のスタイル設定コンポーネントを使用している場合に特に便利です。たとえば、box-sizing が border-box に設定されている場合は、次のように対処することをおすすめします。

  • <html> 要素を border-box に設定する box-sizing オーバーライドを作成します。
  • 地図以外のすべての要素に box-sizing: inherit を使用します。
  • box-sizing 要素を initial にリセットするカスタムの地図コンテナを作成します。

CSS の例

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}