권장사항

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 재설정 또는 CSS 노멀라이저를 사용하여 브라우저 간의 렌더링 차이를 처리하는 경우가 많습니다. 프레임워크는 box-sizing 요소를 사용하여 웹페이지 요소의 여백과 테두리를 조정하는 경우가 많습니다. 이때 보통 content-box를 사용하는 기본 브라우저 동작이 border-box를 사용하도록 변경됩니다.

Maps JavaScript API는 사용자 에이전트 스타일시트의 변경사항을 지원하지 않기 때문에 이러한 유형의 CSS 재설정은 API와 CSS 충돌을 일으킬 수 있습니다. 프레임워크나 구성요소가 Maps JavaScript API의 CSS 클래스 또는 DOM 요소를 참조하는 경우 CSS 충돌이 추가로 발생할 수 있습니다.

이러한 충돌을 방지하려면 다음 사항을 고려하시기 바랍니다.

특수성

삽입되거나 연결된 CSS는 Google 지도 스타일보다 먼저 지도에 적용됩니다. 모든 페이지 스타일이 삽입되거나 연결된 CSS에 정의된 경우 특수성 규칙을 따라 지도에 적절한 스타일이 적용되도록 하세요.

일반적인 CSS 요소(예: img, button, a)는 페이지의 스타일로 덮어쓸 수 있습니다. 가장 일반적인 시나리오 중 하나는 img 요소의 max-width 속성이 100%로 설정된 경우입니다. 이로 인해 InfoWindow를 사용하는 등의 경우 지도 구성요소가 왜곡되거나 숨겨질 수 있습니다.

이 문제를 해결하려면 max-width 속성이 none으로 설정되도록 지도의 img 요소를 업데이트하세요. 예를 들면 다음과 같습니다.

#map img
{
    max-width : none;
}

클래스 이름

JavaScript Maps API의 클래스 이름과 내부 DOM 요소를 참조하지 마세요. 이러한 참조는 지원되지 않으며 참조할 경우 예고 없이 웹사이트에 브레이킹 체인지가 발생할 수 있습니다. 대신 자체 CSS 클래스를 지도의 컨테이너로 만드는 것이 좋습니다.

CSS 프레임워크 또는 JavaScript 구성요소가 이러한 유형의 참조를 사용하는 경우 상자 크기 재정의 권장사항을 해결 방법으로 사용할 수 있습니다.

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