지원

이 페이지에서는 벡터 지도 및 WebGL 기능의 알려진 문제와 해결 방법을 설명합니다.

브라우저/기기 지원

WebGL 기능 미리보기는 Maps JavaScript API와 동일한 브라우저 및 기기를 지원합니다. 특정 기기의 브라우저가 WebGL을 지원하는지 확인하려면 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

드림 <ph type="x-smartling-placeholder">

</ph> 참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

/**
 * 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를 사용할 수 있습니다. 일부 휴대기기의 경우 렌더링 성능이 느려질 것으로 예상됩니다. 모바일 웹에서 벡터 지도를 사용하는 사용자가 성능 통계와 의견을 제공하면 Google에 큰 도움이 됩니다. 위와 같이 벡터 지도 지원을 사용할 수 없는 경우 벡터 지도 ID는 래스터 지도를 사용하도록 자동으로 대체됩니다.

버그

알려진 버그

• AMD GPU가 탑재된 일부 macOS 기기의 Chrome에 알려진 문제가 있습니다. 여러 개의 GPU가 탑재된 기기에서 macOS가 GPU 간에 동적으로 전환하는 경우 이 문제가 특히 혼란을 줄 수 있기 때문에 실행 중인 다른 앱 또는 외부 모니터의 연결 여부에 따라 벡터 지도를 사용하지 못할 수 있습니다. 출시 예정인 Chrome의 ANGLE Metal 백엔드를 사용 설정하면 이 문제가 해결되는 경우가 있는 것으로 보입니다. https://bugs.chromium.org/p/chromium/issues/detail?id=1322521에서 일반적인 출시 계획을 확인할 수 있습니다.

버그 신고

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

의견을 보내주세요

Google은 개발자 여러분과 최종 사용자에게 최적의 벡터 지도 경험을 제공하기 위해 개발자 여러분의 의견을 기다리고 있습니다. 다음과 같은 경우 알려주세요.

• 웹 앱에서 새로운 JavaScript 오류 또는 버그/비정상 종료가 감지되었을 때
• 벡터 지도의 시작 지연 시간이 래스터 지도의 시작 지연 시간보다 훨씬 길 때. 이 경우 시작 지연 시간 연장에 관한 측정항목이 매우 유용합니다. 일반적으로 시작 지연 시간이 허용 기준점을 넘는 수준으로 길어지는지 알아야 합니다.
• 벡터 지도 경험이 그다지 원활하지 않을 때 FPS 또는 버벅거림 측정항목을 로깅하는 경우 벡터 지도와 래스터 지도 간에 어떻게 다른가요?
• 성능이 브라우저에 따라 크게 다를 때

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