네이버 지도 Map Style Editor 적용 방법과 브라우저마다 적용 여부가 달라진 이유

여행지 추천 사이트 제작 중에 맞춤형 지도 테마 적용을 위해 네이버 지도의 Map Style Editor을 사용하게 되었다.

적용 방법은 공식 홈페이지에 친절하게 나와있어서 생각보다 간단했다.

https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Style-Editor.html

NAVER Maps API v3

 

네이버 지도 api를 불러올 때 끝에 submodules=gl을 추가하고 이후 mapOptions에서 gl을 true, customStyleId를 Map Style Editor에서 발급받은 id로 설정하면 된다. 나 같은 경우에는 Naver Map 인스턴스를 생성할 때 두 번째 인자를 options로 두고 공식 문서의 설명대로 적절하게 값을 넣었다.

 

그렇게 적용한 결과 ms edge 브라우저에서는 의도한대로 다크 테마의 지도가 불러와졌다.

 

하지만 이상하게 chrome에서는 테마가 적용이 안된 기본 지도만 불러와졌다.

 

edge는 chrome과 거의 같은 브라우저라 설정 단계에서 무언가가 다르게 적용된 것 같았다. 그렇게 구글링하고 노가다를 한 결과...원인을 알 수 있았는데 바로 그래픽 가속 설정의 문제였다.

브라우저에서 그래픽 가속 설정을 사용하지 않을 경우 네이버 지도에는 map style이 적용되지 않는다.

 

그렇게 가속 사용을 하고 다시 브라우저를 켜보니 아래와 같이 chrome에서도 설정한 map style이 제대로 적용이 되었다.