모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

교통량, 대중교통 및 자전거 계층

교통량, 대중교통 및 자전거 계층은 기본 지도 계층을 수정하여 현재 교통 상황 또는 지역 대중교통 및 자전거 경로 정보를 표시합니다. 선택 영역에서 다음 계층을 사용할 수 있습니다.

  1. 교통량 계층
  2. 대중교통 계층
  3. 자전거 계층

교통량 계층

Google Maps JavaScript API에서 TrafficLayer 객체를 사용하여 지도에 실시간 교통량 정보(지원될 경우)를 추가할 수 있습니다. 교통량 정보는 요청이 있을 시에 제공됩니다.

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

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

교통량 예시 보기

대중교통 계층

Google Maps JavaScript API에서 TransitLayer 객체를 사용하여 지도에 도시의 대중교통망을 표시할 수 있습니다. 대중교통 계층이 활성화되고 지도가 대중교통 정보를 지원하는 도시에서 중심에 있으면, 지도에 굵은 컬러 선으로 주요 대중교통 노선이 표시됩니다. 선의 색상은 대중교통 노선 사업자의 정보를 기반으로 설정됩니다. 대중교통 계층을 활성화하면 대중교통 경로를 더욱 강조할 수 있도록 기본 지도의 스타일이 변경됩니다.

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

도시의 대중교통을 감독하는 공공 기관이고, 보유한 데이터를 여기에 포함하고자 한다면 Google Transit Partner Program 사이트를 방문하여 자세한 내용을 알아보세요.

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

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

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}

대중교통 예시 보기

자전거 계층

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

다음 예시는 매사추세츠 주 케임브리지의 지도에서 활성화된 자전거 계층을 보여줍니다.

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

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

자전거 예시 보기

어두운 녹색 경로는 자전거 전용 경로를 나타냅니다. 밝은 녹색 경로는 전용 "자전거 차선"이 있는 도로를 나타냅니다. 점선으로 표시된 경로는 자전거 사용이 권장되는 도로나 경로 등을 나타냅니다.

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.