모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

데이터 계층

Google 지도 데이터 계층은 임의의 지리 공간 데이터를 위한 컨테이너를 제공합니다. 데이터 계층을 사용하여 사용자 지정 데이터를 저장하거나 GeoJSON 데이터를 Google 지도에 표시할 수 있습니다.

개요

이 DevBytes 동영상을 보면 데이터 계층에 대해 좀 더 자세히 알 수 있습니다.

Google Maps JavaScript API를 사용하여 마커나 폴리라인, 폴리곤 등의 다양한 오버레이로 지도를 마크업할 수 있습니다. 이러한 주석은 각각 스타일링 정보를 위치 데이터와 결합합니다. google.maps.Data 클래스는 임의의 지리 공간 데이터의 컨테이너입니다. 이러한 오버레이를 추가하는 대신, 데이터 계층을 사용하여 지도에 임의의 지리적 데이터를 추가할 수 있습니다. 해당 데이터에 점이나 선, 폴리곤 등과 같은 기하학적 구조가 포함되어 있으면, API는 기본적으로 이들을 마커, 폴리라인, 폴리곤으로 렌더링합니다. 일반 오버레이처럼 이러한 지형지물을 스타일링하거나 데이터 집합에 포함된 다른 속성에 따라 스타일링 규칙을 적용할 수 있습니다.

google.maps.Data 클래스로 다음을 수행할 수 있습니다.

  • 지도상에 폴리곤을 그립니다.
  • GeoJSON 데이터를 지도에 추가합니다.
    GeoJSON은 인터넷에서 지리 공간 데이터의 표준입니다. Data 클래스는 데이터 표현 시 GeoJSON 구조를 준수하고 GeoJSON 데이터를 쉽게 표시하게 해줍니다. loadGeoJson() 메서드를 사용하여 GeoJSON 데이터를 쉽게 가져오고 점, 선 문자열 및 폴리곤을 표시합니다.
  • google.maps.Data를 사용하여 임의의 데이터를 모델링합니다.
    대부분의 실제 엔터티는 그와 관련된 다른 속성이 있습니다. 예를 들어, 매장은 영업 시간이 있고 도로는 속도 제한이 있으며, 각 Girl Guide 극단은 쿠키를 판매하는 구역이 있습니다. google.maps.Data로 이러한 속성을 모델링하고, 그에 따라 데이터의 스타일을 지정할 수 있습니다.
  • 데이터를 표현할 방법을 선택하고, 상황에 따라 알맞게 적용합니다.
    데이터 계층을 이용하면 데이터 시각화와 상호작용에 대한 결정을 내릴 수 있습니다. 예를 들어 편의점 지도를 볼 때 대중교통 티켓을 판매하는 매장만 표시할 수도 있습니다.

폴리곤 그리기

Data.Polygon 클래스는 폴리곤 와인딩을 자동으로 처리해 줍니다. 위도/경도 좌표로 정의된 하나 이상 선형 링의 배열을 이 클래스에 전달할 수 있습니다. 첫 번째 선형 링은 폴리곤의 바깥쪽 경계를 정의합니다. 둘 이상의 선형 링을 전달하는 경우, 두 번째 이후의 선형 링은 폴리곤의 안쪽 경로(구멍)를 정의하는 데 사용됩니다.

다음 예시에서는 두 개의 구멍이 안에 있는 직사각형 폴리곤을 만듭니다.

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

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

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<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>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

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

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

예시 보기.

GeoJSON 로드

GeoJSON은 인터넷에서 지리 공간 데이터 공유를 위한 공통 표준입니다. 경량이고 사람이 쉽게 읽을 수 있으므로 공유와 협업에 이상적입니다. 데이터 계층을 사용하면 단 한 줄의 코드로 Google 지도에 GeoJSON 데이터를 추가할 수 있습니다.

map.data.loadGeoJson('google.json');

모든 지도에는 map.data 객체가 있으며, GeoJSON을 포함한 임의의 지리 공간 데이터에서 데이터 계층 역할을 합니다. data 객체의 loadGeoJSON() 메서드를 호출하여 GeoJSON 파일을 로드하고 표시할 수 있습니다. 아래 예시는 지도를 추가하고 외부 GeoJSON 데이터를 로드하는 방법을 보여줍니다.

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

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<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>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

예시 보기.

샘플 GeoJSON

이 페이지의 대부분의 예시는 공통 GeoJSON 파일을 사용합니다. 이 파일은 오스트레일리아 위에 폴리곤으로 'Google'이라는 6개의 문자를 정의합니다. 이 파일을 자유롭게 복사하고 수정하여 데이터 계층을 테스트해 보세요.

참고: 다른 도메인에서 json 파일을 로드하려면, 해당 도메인에 CORS(Cross Origin Resource Sharing)가 활성화되어 있어야 합니다.

파일의 전체 텍스트는 google.json이라는 단어 옆에 있는 작은 화살표를 확장하면 그 아래에서 볼 수 있습니다.

GeoJSON 데이터 스타일 지정

Data.setStyle() 메서드를 사용하여 데이터의 표시 방식을 지정합니다. setStyle() 메서드는 StyleOptions 객체 리터럴이나 각 기능의 스타일을 계산하는 함수를 취합니다.

간단한 스타일 규칙

지형지물의 스타일을 지정하는 가장 간단한 방법은 StyleOptions 객체 리터럴을 setStyle()에 전달하는 것입니다. 그러면 해당 집합의 각 지형지물에 대해 단일 스타일이 설정됩니다. 각 지형지물 유형은 이용 가능한 옵션의 일부만 렌더링할 수 있습니다. 즉, 서로 다른 지형지물 유형의 스타일을 단일 객체 리터럴로 결합할 수 있습니다. 예를 들어, 아래 스니펫은 점으로 된 기하학적 구조에만 적용되는 사용자 지정 icon과 폴리곤에만 적용되는 fillColor를 모두 설정합니다.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

유효한 스타일/지형지물 조합에 대한 자세한 내용은 스타일 옵션을 참조하세요.

다음은 StyleOptions 객체 리터럴을 사용하여 여러 지형지물의 스트로크와 채우기 색상을 설정하는 예시입니다. 각 폴리곤은 똑같이 스타일이 지정된다는 점에 유의하세요.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

예시 보기.

선언적 스타일 규칙

마커나 폴리곤 등의 대량의 오버레이 스타일을 업데이트하고 싶다면,일반적으로 지도에 각 오버레이를 반복하고 개별적으로 스타일을 설정해야 합니다. 데이터 계층을 사용하면 규칙을 선언적으로 설정하고 전체 데이터 집합에 적용할 수 있습니다. 데이터 또는 규칙이 업데이트되면 스타일링이 모든 지형지물에 자동으로 적용됩니다. 지형지물 속성을 사용하여 스타일을 사용자 지정할 수 있습니다.

예를 들어, 아래 코드는 ascii 문자 집합에서 위치를 검사하여 google.json의 각 문자 색상을 설정합니다. 이 경우, 우리는 데이터와 함께 문자 위치를 인코딩했습니다.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

스타일 제거

적용된 스타일을 제거하려면 빈 객체 리터럴을 setStyles() 메서드에 전달합니다.

// Remove custom styles.
map.data.setStyle({});

이 코드는 지정한 사용자 지정 스타일을 삭제하고, 지형지물은 기본 스타일을 사용하여 렌더링합니다. 지형지물을 더 이상 렌더링하고 싶지 않다면 StyleOptionsvisible 속성을 false로 설정합니다.

// Hide the Data layer.
map.data.setStyle({visible: false});

기본 스타일 재정의

스타일링 규칙은 통상 데이터 계층의 모든 특징에 적용됩니다. 그러나 특정 지형지물에 특별한 스타일링 규칙을 적용하고 싶을 때가 있습니다. 예를 들어, 클릭 시 지형지물을 강조 표시하는 방식이 있습니다.

특별한 스타일링 규칙을 적용하려면 overrideStyle() 메서드를 사용합니다. overrideStyle() 메서드로 변경한 모든 속성은 이미 setStyle()에서 지정된 전역 스타일에 추가로 적용됩니다. 예를 들어, 아래 코드는 클릭 시 폴리콘의 채우기 색상을 변경하지만 다른 스타일을 설정하지 않습니다.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

revertStyles() 메서드를 호출하여 모든 스타일 재정의를 삭제합니다.

스타일 옵션

각 지형지물의 스타일링에 사용할 수 있는 옵션은 지형지물 유형에 따라 달라집니다. 예를 들어, fillColor는 폴리곤 기하 구조에만 렌더링되지만 icon은 점 기하 구조에만 나타납니다. 자세한 내용은 StyleOptions의 참조 문서를 참조하세요.

모든 기하 구조에서 사용 가능

  • clickable: true인 경우, 지형지물이 마우스와 터치 이벤트를 수신합니다.
  • visible: true인 경우 지형지물이 표시됩니다.
  • zIndex: 모든 지형지물은 zIndex 순서에 따라 지도에 표시됩니다. 높은 값을 가진 지형지물이 낮은 값을 가진 지형지물보다 앞에 표시됩니다. 마커는 항상 선 문자열과 폴리곤 앞에 표시됩니다.

점 기하 구조에서 사용 가능

  • cursor: 마우스로 가리키면 보이는 커서.
  • icon: 점 기하 구조 표시를 위한 아이콘.
  • shape: 열 감지에 사용되는 이미지 지도를 정의합니다.
  • title: 텍스트를 롤오버합니다.

선 기하 구조에서 사용 가능

  • strokeColor: 스트로크 색상. 확장된 이름이 붙은 색상을 제외하고 모든 CSS3 색상이 지원됩니다.
  • strokeOpacity: 0.0~1.0 사이의 스트로크 불투명도.
  • strokeWeight: 픽셀 단위의 스트로크 너비.

폴리곤 기하 구조에서 사용 가능

  • fillColor: 채우기 색상. 확장된 이름이 붙은 색상을 제외하고 모든 CSS3 색상이 지원됩니다.
  • fillOpacity: 0.0~1.0. 사이의 채우기 불투명도.
  • strokeColor: 스트로크 색상. 확장된 이름이 붙은 색상을 제외하고 모든 CSS3 색상이 지원됩니다.
  • strokeOpacity: 0.0~1.0 사이의 스트로크 불투명도.
  • strokeWeight: 픽셀 단위의 스트로크 너비.

이벤트 핸들러 추가

지형지물은 mouseup 또는 mousedown 등의 이벤트에 응답합니다. 이벤트 리스너를 추가하여 사용자가 지도의 데이터와 상호작용하게 할 수 있습니다. 아래 예시에서는 mouseover 이벤트를 추가하고 마우스 커서 아래 지형지물에 대한 정보를 표시합니다.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

데이터 계층 이벤트

다음 이벤트는 기하학적 유형과 관계없이 모든 지형지물에 공통입니다.

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

이 이벤트에 대한 자세한 내용은 google.maps.data 클래스의 참조 문서에서 찾을 수 있습니다.

동적으로 모양 변경

각 지형지물의 스타일을 계산하는 함수를 google.maps.data.setStyle() 메서드에 전달하여 데이터 계층의 스타일을 설정할 수 있습니다. 이 함수는 지형지물의 속성이 업데이트될 때마다 호출됩니다.

아래 예시에서는 지형지물의 isColorful 속성을 업데이트하는 click 이벤트에 대한 이벤트 리스너를 추가합니다. 지형지물 스타일링은 속성이 설정되는 즉시 변경 사항을 반영하도록 업데이트됩니다.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

예시 보기.

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

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