모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

마커 클러스터링

개요

이 튜토리얼은 마커 클러스터를 사용하여 수많은 마커를 지도에 표시하는 방법을 보여줍니다. MarkerClusterer 라이브러리를 Google Maps JavaScript API와 함께 사용하여 근접한 마커를 클러스터로 결합하고 지도의 마커 표시를 단순화할 수 있습니다.

마커 클러스터링의 작동 방법을 보려면 아래 지도를 참조하세요.

클러스터의 숫자는 클러스터가 포함하는 마커의 수를 나타냅니다. 클러스터 위치를 확대하면 클러스터의 숫자가 줄어들어 지도에 개별 마커가 표시되기 시작합니다. 지도를 축소하면 마커가 클러스터로 다시 통합됩니다.

다음 샘플은 이 지도를 만드는 데 필요한 전체 코드를 보여줍니다.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
  {lat: -36.817685, lng: 175.699196},
  {lat: -36.828611, lng: 175.790222},
  {lat: -37.750000, lng: 145.116667},
  {lat: -37.759859, lng: 145.128708},
  {lat: -37.765015, lng: 145.133858},
  {lat: -37.770104, lng: 145.143299},
  {lat: -37.773700, lng: 145.145187},
  {lat: -37.774785, lng: 145.137978},
  {lat: -37.819616, lng: 144.968119},
  {lat: -38.330766, lng: 144.695692},
  {lat: -39.927193, lng: 175.053218},
  {lat: -41.330162, lng: 174.865694},
  {lat: -42.734358, lng: 147.439506},
  {lat: -42.734358, lng: 147.501315},
  {lat: -42.735258, lng: 147.438000},
  {lat: -43.999792, lng: 170.463352}
]
<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>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

체험해 보기

코드 블록 오른쪽을 마우스로 가리켜서 코드를 복사하거나 JSFiddle에서 엽니다.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

간단한 일러스트레이션으로 이 튜토리얼에서는 locations 배열을 사용하여 지도에 마커 집합을 추가합니다. 다른 소스를 사용하여 지도에 대한 마커를 가져올 수 있습니다. 자세한 내용은 마커 만들기 가이드를 참조하세요.

마커 클러스터링 이해

MarkerClusterer 라이브러리는 지도를 특정 크기의 정사각형(각 확대/축소 수준에서 크기가 변경됨)으로 나누고 각 정사각형 그리드에 마커를 그룹화하는 그리드 기반 클러스터링 기술을 사용합니다. 특정 마커에 클러스터를 만들고 해당 경계에 있는 마커를 클러스터에 추가합니다. 해당 라이브러리는 모든 마커가 지도의 확대/축소 수준을 기반으로 가장 가까운 그리드 기반 마커 클러스터에 할당될 때까지 이 과정을 반복합니다.

마커가 두 개 이상의 기존 클러스터의 경계에 있는 경우, Maps JavaScript API는 각 클러스터와 마커 사이의 거리를 측정하여 가장 가까운 클러스터에 마커를 추가합니다.

클러스터에 포함된 모든 마커 간 평균 거리를 반영하도록 MarkerClusterer 옵션으로 클러스터 위치를 조정할 수 있습니다. 또한 그리드 크기, 클러스터 아이콘, 클러스터 텍스트 등과 같은 다른 매개변수를 수정하도록 MarkerClusterer를 사용자 지정할 수도 있습니다.

마커 클러스터러 추가

아래 단계에 따라 마커 클러스터러를 추가합니다.

  1. GitHub에서 마커 클러스터링 라이브러리 및 이미지를 가져와서 앱에 액세스할 수 있는 서버에 저장합니다.
    MarkerClusterer용 JavaScript 라이브러리 및 이미지 파일은 GitHub의 Google 지도 리포지토리에서 구할 수 있습니다. GitHub에서 앱이 액세스 할 수 있는 위치로 다음 파일을 다운로드하거나 복사합니다

  2. 페이지에 마커 클러스터링 라이브러리를 추가합니다.

    이 튜토리얼의 코드에서 아래 스크립트는 https://developers.google.com에서 markerclusterer.js 라이브러리 파일의 위치를 지정합니다.

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    

    경로를 변경하여 동일한 파일을 저장한 위치를 지정합니다.


  3. 앱에 마커 클러스터러를 추가합니다.

    아래 코드는 마커 클러스터러를 지도에 추가합니다.

    var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }
    

    이 샘플은 markers 배열을 MarkerClusterer로 전달합니다. 또한 imagePath 매개변수에서 5개의 이미지 파일의 위치를 모두 지정합니다. 해당 위치를 동일한 이미지 파일을 저장한 위치의 경로로 바꿉니다.

자세히 알아보기

GitHub의 Google 지도 리포지토리에서 마커 클러스터링의 훨씬 복잡한 예를 볼 수 있습니다.

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

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