지원

이 페이지에는 벡터 지도 및 WebGL 기능의 알려진 문제와 해결 방법이 나와 있습니다.

브라우저/기기 지원

WebGL 기능 미리보기는 Maps JavaScript API와 동일한 브라우저 및 기기를 지원합니다. 특정 기기의 브라우저가 WebGL을 지원하는지 확인하려면 https://get.webgl.org/ 또는 caniuse.com을 방문하세요. 또한 브라우저 설정에서 하드웨어 가속이 사용 설정되어 있는지 확인하세요. 그러지 않으면 벡터 지도가 래스터로 되돌아갑니다.

래스터 또는 벡터

벡터 지도가 래스터로 되돌아가기도 하며, 이 경우에는 벡터 지도에 종속된 지형지물을 사용할 수 없습니다. 래스터 지도로 되돌아가는 이유는 다양합니다. 이 섹션에서는 웹브라우저를 올바르게 구성하는 방법과 벡터 지도 기능이 있는지를 프로그래매틱 방식으로 확인하는 방법에 대해 설명합니다.

Chrome에서 브라우저 기능 확인

설치된 Chrome에서 어떤 하드웨어 가속 기능이 사용 설정되어 있는지 확인하려면 chrome://gpu/에서 다음 항목이 사용 설정되어 있는지(녹색인지) 확인하세요.

'OpenGL: Enabled'
'WebGL: Hardware accelerated'
'WebGL2: Hardware accelerated'

하드웨어 가속 사용 설정

벡터 지도를 지원하려면 대부분의 브라우저에서 하드웨어 가속을 사용 설정해야 합니다. Chrome 및 Microsoft Edge에서 하드웨어 가속을 사용 설정하려면 설정을 열고, 시스템을 선택한 후, 가능한 경우 하드웨어 가속 사용을 사용 설정하세요.

Safari에서 웹사이트 환경설정을 변경하는 방법에 대해 알아보세요.
Firefox의 성능 설정에 대해 알아보세요.

프로그래매틱 방식으로 래스터 또는 벡터 확인

map.getRenderingType()을 호출하여 지도가 래스터인지 또는 벡터인지를 프로그래매틱 방식으로 확인할 수 있습니다. 다음 예에는 renderingtype_changed 이벤트를 모니터링하고 래스터 또는 벡터 지도의 사용 여부를 보여주는 정보 창을 표시하는 코드가 나와 있습니다.

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;index.ts

자바스크립트

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;index.js

WebGL 렌더링 컨텍스트를 사용하여 WebGL 2에 대한 지원을 확인할 수도 있습니다.

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

프로그래매틱 방식으로 WebGL 렌더링 컨텍스트를 감지하는 다른 방법에 대해 알아보세요.

모바일 웹 지원

벡터 지도에 대한 모바일 웹 지원은 아직 시험 중입니다. 개발자는 클라이언트 API를 사용하여 모바일 웹브라우저를 감지하고 벡터 지도 대신 래스터 지도와 연결된 지도 ID를 사용할 수 있습니다. 일부 휴대기기의 경우 렌더링 성능이 느려질 것으로 예상됩니다. 모바일 웹에서 벡터 지도를 사용하는 경우 성능 통계와 의견을 제공해 주시면 감사하겠습니다. 위와 같이 벡터 지도 지원을 사용할 수 없는 경우 벡터 지도 ID가 래스터 지도를 사용하도록 자동으로 대체됩니다.

버그 신고

버그를 신고하기 전에 브라우저 및 GPU 드라이버를 최신 버전으로 업데이트하세요.
chrome://settings/system(Chrome), about:preferences#general(Firefox), edge://settings/system(Microsoft Edge)에서 하드웨어 가속이 사용 설정되어 있는지 확인하세요. macOS 10.15 이상의 Safari에서는 이 설정이 자동으로 사용 설정됩니다. 이전 버전의 MacOS에서는 Safari 고급 설정으로 이동하여 'Use hardware acceleration'(하드웨어 가속 사용) 옵션이 사용 설정되어 있음을 확인하세요.
버그 신고에 jsfiddle 샘플 코드 링크를 포함하세요.
또한 렌더링 문제가 발생하면 chrome://gpu(Chrome), about:support(Firefox) 또는 edge://gpu(Microsoft Edge)의 스크린샷을 찍어 GPU 관련 정보를 버그 신고에 첨부하세요.

의견 요청

Google은 고객님의 의견을 소중하게 생각하며 개발자와 최종 사용자에게 최고의 벡터 지도 환경을 제공하기 위해 최선을 다하고 있습니다. 다음과 같은 경우 알려주세요.

웹 앱에서 새로운 자바스크립트 오류 또는 버그/비정상 종료가 감지되었습니다.
벡터 지도의 시작 지연 시간은 래스터 지도의 시작 지연 시간보다 훨씬 깁니다. 이 경우 시작 지연 시간 회귀분석을 위한 측정항목이 매우 유용합니다. 일반적으로 시작 지연 시간이 허용 기준점을 넘어서는지 알아야 합니다.
벡터 지도 환경이 그렇게 매끄럽지 않습니다. FPS 또는 버벅거림 측정항목을 로깅하는 경우 벡터 지도와 래스터 지도 사이에 어떤 차이가 있나요?
성능은 브라우저에 따라 크게 다릅니다.

벡터 지도와 래스터 지도의 비교를 위해 A/B 테스트를 설정한 경우 성능에 관한 의견을 공유해 주시면 기능을 개선하는 데 크게 도움이 됩니다.