교통정보, 대중교통 및 자전거 레이어

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

교통정보, 대중교통 및 자전거 레이어는 기본 지도 레이어를 수정하여 현재 교통상황, 지역 대중교통 네트워크 또는 자전거 경로 정보를 표시합니다. 이 레이어는 일부 지역에서 사용할 수 있습니다.

교통정보 레이어

Maps JavaScript API에서 TrafficLayer 객체를 사용하여 지도에 실시간 교통정보를 추가할 수 있습니다 (지원되는 경우). 교통정보는 자주 업데이트되지만 즉시 업데이트되지는 않습니다. 동일한 영역에 대한 연속적인 요청이 빠르게 이루어지면 다른 결과가 나올 가능성이 낮습니다.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 34.04924594193164, lng: -118.24104309082031 },
    }
  );

  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

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

자바스크립트

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 34.04924594193164, lng: -118.24104309082031 },
  });
  const trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

대중교통 계층

Maps JavaScript API를 사용하면 TransitLayer 객체를 통해 지도에 도시의 대중교통 네트워크를 표시할 수 있습니다. 대중교통 레이어가 사용 설정되어 있고 지도가 대중교통 정보를 지원하는 도시 중심에 있으면 지도에 주요 대중교통 노선이 두꺼운 색상의 선으로 표시됩니다. 선 색상은 대중교통 노선 연산자의 정보를 기반으로 설정됩니다. 대중교통 레이어를 사용 설정하면 대중교통 경로가 더욱 강조되도록 기본 지도의 스타일이 변경됩니다.

대중교통 정보는 선택 위치에서만 이용할 수 있습니다. 현재 대중교통 정보를 제공하는 도시 목록은 이 목록을 참고하세요.

거주 도시의 대중교통을 감독하는 공공 기관에서 데이터를 포함하고자 한다면 Google 대중교통 파트너 프로그램 사이트를 참고하세요.

다음 예시는 영국 런던 지도에서 활성화된 대중교통 계층을 보여줍니다.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: { lat: 51.501904, lng: -0.115871 },
    }
  );

  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

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

자바스크립트

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 51.501904, lng: -0.115871 },
  });
  const transitLayer = new google.maps.TransitLayer();

  transitLayer.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

자전거 계층

Maps JavaScript API에서 BicyclingLayer 객체를 사용하여 지도에 자전거 정보를 추가할 수 있습니다. BicyclingLayer는 지정된 지도 위에 자전거 경로 레이어, 추천 자전거 경로 및 자전거 사용과 관련된 기타 오버레이를 렌더링합니다. 또한 레이어는 자전거 경로를 지원하는 도로를 강조하기 위해 기본 지도 자체의 스타일을 변경하며 자전거에 적합하지 않은 거리를 강조하지 않습니다.

다음 예는 캠브리지, 매사추세츠주 지도에서 사용 설정된 자전거 레이어를 보여줍니다.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 14,
      center: { lat: 42.3726399, lng: -71.1096528 },
    }
  );

  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

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

자바스크립트

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 42.3726399, lng: -71.1096528 },
  });
  const bikeLayer = new google.maps.BicyclingLayer();

  bikeLayer.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

어두운 녹색 경로는 자전거 전용 경로를 나타냅니다. 연한 녹색 경로는 전용 '자전거 차선'이 있는 거리를 나타냅니다. 대시 경로는 자전거를 사용하기 위해 권장되는 거리나 경로를 나타냅니다.