시각화: 지도

  1. 개요
  2. 이름이 지정된 위치
  3. 지오코딩된 위치
  4. 마커 맞춤설정
  5. 여러 마커 세트 추가
  6. 지도 스타일 지정
  7. 로드
  8. 데이터 형식
  9. 구성 옵션
  10. 메서드
  11. 이벤트
  12. 데이터 정책

개요

Google 지도 차트에는 Google 지도 API를 사용하여 지도가 표시됩니다. 데이터 값이 지도에 마커로 표시됩니다. 데이터 값은 좌표 (위도 쌍) 또는 주소일 수 있습니다. 지도는 식별된 모든 지점을 포함하도록 조정됩니다.

지도를 위성 이미지가 아닌 선 그림으로 나타내려면 지역 차트를 사용하세요.

이름이 지정된 위치

인구별로 상위 10개 국가의 지도 아래에 표시된 것처럼 마커를 표시할 장소를 식별할 수 있습니다.

사용자가 마커 중 하나를 선택하면 showInfoWindow 옵션을 사용했으므로 국가와 인구가 포함된 도움말이 표시됩니다. 또한 사용자가 잠시 마커 위에 마우스를 가져가면 '제목' 팁에 동일한 정보가 함께 표시됩니다. showTooltip 옵션을 사용했기 때문입니다. 다음은 전체 HTML입니다. 

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {
    'packages': ['map'],
    // Note: you will need to get a mapsApiKey for your project.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    
    });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Population'],
        ['China', 'China: 1,363,800,000'],
        ['India', 'India: 1,242,620,000'],
        ['US', 'US: 317,842,000'],
        ['Indonesia', 'Indonesia: 247,424,598'],
        ['Brazil', 'Brazil: 201,032,714'],
        ['Pakistan', 'Pakistan: 186,134,000'],
        ['Nigeria', 'Nigeria: 173,615,000'],
        ['Bangladesh', 'Bangladesh: 152,518,015'],
        ['Russia', 'Russia: 146,019,512'],
        ['Japan', 'Japan: 127,120,000']
      ]);

    var options = {
      showTooltip: true,
      showInfoWindow: true
    };

    var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

지오코딩된 위치

위도와 경도로 위치를 지정할 수도 있습니다. 이 경우 이름이 지정된 위치보다 빠르게 로드됩니다.

위 차트는 위도 및 경도로 4개의 위치를 식별합니다.

데이터
  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
  ]);
전체 HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
      });
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });
      }

    </script>
  </head>

  <body>
    <div id="map_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

마커 맞춤설정

웹상의 다른 곳에 있는 마커 도형을 사용할 수 있습니다. 다음은 iconarchive.com의 파란색 핀을 사용하는 예입니다.

위 차트에서 핀을 선택하면 기울어집니다. PNG, GIF, JPG가 지원됩니다.

데이터
  var options = {
    icons: {
      default: {
        normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
        selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
      }
    }
  };
전체 HTML
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
      });
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var options = {
          icons: {
            default: {
              normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
              selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
            }
          }
        };

        var map = new google.visualization.Map(document.getElementById('map_markers_div'));
        map.draw(data, options);
      }

    </script>
  </head>

  <body>
    <div id="map_markers_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

여러 마커 세트 추가하기

기본 마커 세트를 만드는 것 외에도 여러 마커 집합을 만들 수도 있습니다.

추가 마커 집합을 만들려면 icons 옵션에 ID를 추가하고 마커 이미지를 설정합니다. 그런 다음 데이터 표에 열을 추가하고 데이터 표의 각 행에 사용할 마커 세트의 ID를 설정합니다. 'default' 또는 null를 사용하여 기본 마커를 사용할 수도 있습니다.

옵션
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
전체 HTML
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['map'],
      // Note: you will need to get a mapsApiKey for your project.
      // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
      'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker')

      data.addRows([
        ['New York City NY, United States', 'New York',   'blue' ],
        ['Scranton PA, United States',      'Scranton',   'green'],
        ['Washington DC, United States',    'Washington', 'pink' ],
        ['Philadelphia PA, United States',  'Philly',     'green'],
        ['Pittsburgh PA, United States',    'Pittsburgh', 'green'],
        ['Buffalo NY, United States',       'Buffalo',    'blue' ],
        ['Baltimore MD, United States',     'Baltimore',  'pink' ],
        ['Albany NY, United States',        'Albany',     'blue' ],
        ['Allentown PA, United States',     'Allentown',  'green']
      ]);
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

지도 스타일 지정

지도 시각화에는 맞춤 스타일을 설정할 수 있는 기능이 포함되어 있으므로 하나 또는 여러 개의 맞춤 지도 유형을 만들 수 있습니다.

지도 스타일 객체를 만들고 지도 옵션의 식별자(mapTypeId) 아래에 배치하여 맞춤 지도 유형을 정의할 수 있습니다. 예를 들면 다음과 같습니다. 

  var options = {
    maps: {
      <map style ID>: <map style object>
    }
  };

나중에 이 맞춤 지도 유형을 할당한 지도 스타일 ID로 참조할 수 있습니다.

지도 스타일 객체에는 지도 유형 컨트롤의 표시 이름인 name (mapTypeId와 일치하지 않아도 됨)와 스타일을 지정하려는 각 요소의 스타일 객체가 포함된 styles 배열이 포함됩니다. Google 지도 API 참조에는 맞춤 지도 유형을 만들 수 있는 다양한 요소, 지형지물 및 스타일 유형 목록이 포함되어 있습니다.

참고: 맞춤 mapTypeId는 maps 옵션 아래에 있어야 합니다.

옵션
      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };
전체 HTML
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['map'],
      // Note: you will need to get a mapsApiKey for your project.
      // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
      'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

      data.addRows([
        ['Lake Buena Vista, FL 32830, United States',                  'Walt Disney World'],
        ['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
        ['7007 Sea World Drive, Orlando, FL 32821, United States',     'Seaworld Orlando' ]
      ]);

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

맞춤 지도 유형을 만드는 것 외에도 mapTypeIds 옵션을 사용하여 사용자가 지도 유형 컨트롤에서 볼 수 있는 지도를 지정할 수도 있습니다. 기본적으로 맞춤 지도 유형을 포함한 모든 지도 유형이 지도 유형 컨트롤에 표시됩니다. mapTypeIds 옵션은 사용자가 볼 수 있도록 하려는 지도 유형의 문자열 배열을 허용합니다. 이러한 문자열은 기본 지도 스타일에 대해 사전 정의된 이름 (예: 일반, 위성, 지형, 하이브리드) 또는 정의한 맞춤 지도 유형의 지도 스타일 ID를 참조해야 합니다. mapTypeIds 옵션을 설정하면 이 배열에서 지정한 지도 유형만 지도에서 사용할 수 있습니다.

mapType 옵션과 함께 사용하여 지도 스타일을 기본값으로 설정할 수 있지만 mapTypeIds 배열에 포함하지는 않습니다. 그러면 지도가 초기 로드 시에만 표시됩니다. 

      var options = {
        mapType: 'styledMap',
        zoomLevel: 7,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        // User will only be able to view/select custom styled maps.
        mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
        maps: {
          styledMap: {
            name: 'Styled Map',
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]},
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]},
              {featureType: 'road.highway', elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
          ]},
          redEverything: {
            name: 'Redden All The Things',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#fde0dd'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#67000d'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#67000d'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
          ]},
          imBlue: {
            name: 'All Your Blues are Belong to Us',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#c5cae9'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#023858'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#0288d1'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
          ]}
        }
      };

로드 중

google.charts.load 패키지 이름은 "map"입니다.

사용자의 지도 데이터 서비스가 축소되지 않도록 하려면 여기에 사용된 예시를 복사하기보다는 프로젝트에 자체 mapsApiKey를 사용해야 합니다. 자세한 내용은 로드 설정을 참조하세요. 

      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
      });

시각화의 클래스 이름은 google.visualization.Map입니다. 축약된 이름 Map는 자바스크립트 Map 클래스와 충돌하므로 ChartWrapper는 chartType: 'Map'를 지정할 때 이 패키지를 자동으로 로드하지 않습니다. 대신 chartType: 'google.visualization.Map'를 지정할 수 있습니다.

  var visualization = new google.visualization.Map(container);

데이터 형식

다음과 같은 두 가지 대체 데이터 형식이 지원됩니다.

  1. 위도-경도 쌍 - 처음 두 열은 각각 위도와 경도를 지정하는 숫자여야 합니다. 선택사항인 세 번째 열에는 처음 두 열에 지정된 위치를 설명하는 문자열이 포함됩니다.
  2. 문자열 주소 - 첫 번째 열은 주소가 포함된 문자열이어야 합니다. 이 주소는 최대한 완전해야 합니다. 선택사항인 두 번째 열에는 첫 번째 열의 위치를 설명하는 문자열이 포함됩니다. 특히 10개가 넘는 주소가 있는 경우 문자열 주소가 더 느리게 로드됩니다.

참고: 위도-경도 쌍 옵션은 특히 대용량 데이터의 경우 지도를 훨씬 더 빠르게 로드합니다. 대규모 데이터 세트에 이 옵션을 사용하는 것이 좋습니다. Google 지도 API에서 주소를 경도가 높은 지점으로 변환하는 방법을 알아보세요. 맵에는 최대 400개의 항목이 표시될 수 있습니다. 데이터의 행이 400개를 초과하면 처음 400개만 표시됩니다.

구성 옵션

이름
ScrollWheel 사용 설정

true로 설정하면 마우스 스크롤 휠을 사용하여 확대 및 축소를 사용 설정합니다.

유형: 부울
기본값: false
아이콘

맞춤 마커 세트를 보관합니다. 각 마커 집합은 normal 및 selected 마커 이미지를 지정할 수 있습니다. default 옵션을 설정하여 기본 집합을 설정하거나 고유 마커 ID를 설정하여 맞춤 마커 세트를 설정할 수 있습니다. 

var options = {
  icons: {
    default: {
      normal:   '/path/to/marker/image',
      selected: '/path/to/marker/image'
    },
    customMarker: {
      normal:   '/path/to/other/marker/image',
      selected: '/path/to/other/marker/image'
    }
  }
};
유형: 객체
기본값: null
선 색상

ShowLine이 true인 경우 선 색상을 정의합니다. 예: '#800000'.

유형: 문자열
기본값: 기본 색상
선 너비

ShowLine이 true인 경우 선 너비 (픽셀)를 정의합니다.

유형: 숫자
기본값: 10
maps.<mapTypeId>

맞춤 지도 유형의 속성이 포함된 객체입니다. 이 맞춤 지도 유형은 맞춤 지도 유형으로 지정한 mapTypeId에서 액세스합니다. 생성된 맞춤 지도 유형마다 새로운 mapTypeId를 제공해야 합니다. 각 맞춤 지도 유형에는 다음 두 가지 속성이 포함되어야 합니다.

  • name: 스타일 지도 유형의 표시 이름
  • style: 스타일 지도 유형의 스타일 객체가 포함된 배열
유형: 객체
기본값: null
maps.<mapTypeId>.name

useMapTypeControl가 true로 설정된 경우 지도 컨트롤에 표시될 지도의 이름입니다.

유형: 문자열
기본값: null
maps.<mapTypeId>.styles

맞춤 지도 유형의 다양한 요소에 대한 스타일 객체를 보유합니다.

각 스타일 객체에는 1~3개의 속성(featureType, elementType, stylers)이 포함될 수 있습니다. featureType 및 elementType를 생략하면 스타일이 모든 지도 지형지물/요소에 적용됩니다. 

{
  featureType: 'roadway.highway',
  elementType: 'labels.text.fill',
  stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}

다양한 기능, 요소, 스타일러에 대한 자세한 내용은 지도 문서를 참고하세요.

유형: 배열
기본값: null
mapType

표시할 지도 유형입니다. 가능한 값은 'normal', 'terrain', 'satellite', 'hybrid' 또는 맞춤 지도 유형의 ID입니다(만든 경우).

유형: 문자열
기본값: '하이브리드'
지도 유형 ID

지도 유형 컨트롤(useMapTypeControl: true)을 사용하는 경우 이 배열에 지정된 ID만 지도 유형 컨트롤에 표시됩니다. 이 옵션을 설정하지 않으면 지도 유형 컨트롤의 기본값은 표준 Google 지도 지도 유형 컨트롤 옵션과 함께 사용 가능한 맞춤 지도 유형을 기본으로 합니다.

유형: 배열
기본값: null
ShowInfoWindow

true로 설정하면 사용자가 지점 마커를 선택할 때 별도의 창에 위치 설명이 표시됩니다. 이 옵션은 버전 45까지 showTip였습니다. showTooltip도 참고하세요.

유형: 부울
기본값: false
쇼라인

true로 설정하면 모든 점을 통해 Google 지도 다중선이 표시됩니다.

유형: 부울
기본값: false
도움말 보기

true로 설정하면 마우스가 점 마커 위에 위치할 때 위치 설명이 도움말로 표시됩니다. 이 옵션은 버전 45까지 showTip였습니다. 현재 HTML은 지원되지 않으므로 도움말에 원시 HTML 태그가 표시됩니다.

유형: 부울
기본값: false
지도 컨트롤 사용

뷰어가 [지도, 위성, 하이브리드, 지형] 간에 전환할 수 있는 지도 유형 선택기를 표시합니다. useMapTypeControl이 false (기본값)인 경우 선택기가 표시되지 않고 유형은 mapType 옵션에 따라 결정됩니다.

유형: 부울
기본값: false
zoomLevel

지도의 초기 확대/축소 수준을 나타내는 정수로, 여기서 0은 완전히 축소(전 세계)이고 19는 최대 확대/축소 수준입니다. Google 지도 API의 '확대/축소 수준'을 참고하세요.

유형: 숫자
기본값: 자동

방법

메서드
draw(data, options)

지도를 그립니다.

반환 유형: 없음
getSelection()

표준 getSelection() 구현입니다. 선택 요소는 모두 행 요소입니다. 2개 이상의 선택된 행을 반환할 수 있습니다.

반환 유형: 선택 요소의 배열
setSelection(selection)

표준 setSelection() 구현입니다. 모든 선택 항목을 행 선택으로 취급합니다. 여러 행 선택이 지원됩니다.

반환 유형: 없음

이벤트

이름
error

차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
select

표준 선택 이벤트

속성: 없음

데이터 정책

지도는 Google 지도에 표시됩니다. 데이터 정책에 대한 자세한 내용은 Google 지도 서비스 약관을 참고하세요.