모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

퓨전 테이블 계층(시험용)

  1. 개요
  2. 제한
  3. 퓨전 테이블 설정
  4. FusionTables 계층 생성
  5. 퓨전 테이블 쿼리
  6. 퓨전 테이블 스타일
  7. 퓨전 테이블 열지도

참고: 퓨전 테이블 계층은 시험용입니다.

퓨전 테이블 계층은 Google 퓨전 테이블에 포함된 데이터를 렌더링합니다.

개요

Google Maps JavaScript API에서 FusionTablesLayer 객체를 사용하여 Google 퓨전 테이블에 포함된 데이터를 지도에서 계층으로 렌더링할 수 있습니다. Google 퓨전 테이블은 데이터베이스 테이블로, 각 행에는 특정 지형지물에 관한 데이터가 포함됩니다. 지리적 데이터의 경우, Google 퓨전 테이블 내의 각 행에 위치 데이터가 추가로 포함되며 지형지물의 위치 정보를 보유합니다. FusionTablesLayer는 퓨전 테이블의 인터페이스를 제공하고 이 위치 데이터의 자동 렌더링을 지원하며, 지형지물의 추가 데이터를 표시하는 클릭 가능한 오버레이를 제공합니다.

아래는 지리 데이터를 보여주는 샘플 퓨전 테이블입니다.

제한

Google Maps JavaScript API를 사용하여 지도에 최대 5개의 퓨전 테이블 계층을 추가할 수 있고 각각 최대 5개의 스타일링 규칙을 적용할 수 있습니다.

추가 정보:

  • 테이블에 있는 첫 100,000행만 매핑되거나 쿼리 결과에 포함됩니다.
  • 공간 조건자가 포함된 쿼리만 이 첫 번째 100,000행 내에서 데이터를 반환합니다. 따라서 매우 큰 테이블에 필터를 적용하고 100,000번째 이후 행에서 그 필터와 데이터가 일치하면 이 행은 표시되지 않습니다.
  • 데이터를 가져오거나 삽입할 때 다음 사항을 기억하십시오.
    • 한 API 호출에서 보내는 데이터의 전체 용량은 1MB를 초과할 수 없습니다.
    • 퓨전 테이블의 데이터 셀은 최대 100만 자를 지원합니다. 좌표의 정확도를 낮추거나 폴리곤이나 선의 설명을 단순화해야 할 경우가 있습니다.
    • 지원되는 최대 교점 개수는 테이블당 500만 개입니다.
  • 지도를 보면 다음을 확인할 수 있습니다.
    • 다중 기하 구조의 10개의 최대 영역 구성 요소가 표시됩니다.
    • 화면을 더욱 축소하면 500개 이상의 지형지물이 포함된 테이블이 점을 표시합니다(선이나 폴리곤이 아님).

퓨전 테이블 설정

퓨전 테이블은 지리 데이터 지원이 내장된 데이터 테이블입니다. 자세한 내용은 퓨전 테이블 정보를 참조하세요. 퓨전 테이블 계층이 Google 지도의 API에서 데이터를 표시하려면, 테이블이 다음 기준을 충족해야 합니다.

  • 테이블은 Public 또는 Unlisted으로 공유되어야 합니다.
  • 테이블은 Location으로 노출된 열이 하나 이상 있어야 합니다. 퓨전 테이블 웹 인터페이스에서 Edit > Modify Columns를 선택하고 원하는 열을 선택합니다.

Location 열은 아래와 같은 서식 요구사항을 따라야 합니다.

  • 위도/경도 좌표는 쉼표로 구분된 단일 열(위도,경도)로 입력하거나 2개 열(각각 위도 및 경도)로 분할할 수 있습니다. 자세한 내용은 퓨전 테이블 문서를 참조하세요.
  • 주소는 가장 먼저 지오코딩되어야 합니다. 퓨전 테이블 웹 인터페이스에서 File > Geocode를 선택합니다.
  • 점, 선, 폴리곤 등의 KML 기하학 데이터가 지원됩니다.

FusionTables 계층 생성

FusionTablesLayer 생성자는 테이블의 암호화된 ID를 사용하여 공개 퓨전 테이블에서 계층을 생성합니다. 이 ID는 퓨전 테이블 UI의 File > About를 선택하면 찾을 수 있습니다.

지도에 퓨전 테이블 계층을 추가하려면 계층을 생성하고 다음 속성을 포함한 query 객체를 전달합니다.

  • select 속성. 이 속성 값은 위치 정보가 포함된 열 이름입니다. 공백이나 예약어가 포함된 열 이름이나 문자로 시작하지 않는 열 이름은 따옴표로 묶어야 합니다.
  • from 속성. 이 속성 값은 암호화된 ID 중 하나입니다.

이어서 다른 오버레이와 마찬가지로 계층의 mapMap 객체로 설정합니다.

참고: 이전 버전의 Google Maps JavaScript API는 숫자 ID로 퓨전 테이블을 참조했습니다. 이 방법은 계속 작동하지만 암호화된 ID를 사용하는 것이 좋습니다.

다음 예시는 공개 퓨전 테이블을 사용하여 2009년에 시카고에서 발생한 살인을 보여줍니다.

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

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.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'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

퓨전 테이블 예시 보기

퓨전 테이블 쿼리

퓨전 테이블을 사용하면 결과 집합을 지정된 기준으로 제한할 수 있는 강력한 쿼리를 적용할 수도 있습니다. 쿼리는 FusionTablesLayerOptions query 매개변수를 사용하여 지정됩니다.

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

locationColumnLocation 유형의 기존 지오코딩된 열입니다. select 또는 where 필드에서 공백이나 예약어가 포함되거나 문자로 시작하지 않는 열 이름은 따옴표로 묶어야 합니다.

지원되는 검색 연산자는 퓨전 테이블 문서에 명시되어 있습니다.

다음 예시는 주간 이용자 수가 5,000명 이상인 CTA 레드 라인을 따라 위치를 표시합니다.

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

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.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'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

퓨전 테이블 예시 보기

퓨전 테이블 스타일

퓨전 테이블 계층 생성자는 또한 FusionTablesLayerOptions styles 매개변수를 받아서, 선과 폴리곤에 색상, 스트로크 두께 및 불투명도를 적용합니다. 마커 아이콘은 지원되는 지도 마커 또는 아이콘 이름에서도 지정될 수 있습니다.

참고: 스타일은 각 지도마다 하나의 퓨전 테이블 계층에만 적용됩니다. 해당 계층에 최대 5개까지 스타일을 적용할 수 있습니다.

styles 매개변수는 다음 구문을 사용합니다.

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

스타일은 퓨전 테이블 웹 인터페이스에서 지정된 스타일링 위에 적용됩니다. 계층 생성자에 제공된 스타일이 나열된 순서대로 적용됩니다. 여러 규칙에 일치하는 지형지물은 마지막으로 일치하는 스타일이 적용됩니다.

모든 지형지물에 적용되는 기본 스타일을 생성하려면 where 절이 없는 스타일을 생성합니다.

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

다음 예시는 다음과 같은 기능을 보여줍니다.

  • 투명도 0.3으로 모든 폴리곤을 녹색으로 칠하는 기본 스타일.
  • 'birds' 열이 300을 초과하는 모든 폴리곤을 파란색으로 칠합니다. 기본 스타일에서 설정된 불투명도 수준을 유지합니다.
  • 'population' 열이 5를 넘는 모든 폴리곤의 불투명도 수준을 1.0으로 설정합니다. 해당 폴리곤은 fillColor 값을 유지합니다.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.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'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

퓨전 테이블 예시 보기

퓨전 테이블 열지도

또한 퓨전 테이블은 열지도에 제한된 지원을 제공합니다. 열지도에서는 일치하는 위치의 밀도를 색상표를 사용하여 나타냅니다. 현재 열지도는 관련된 위치의 상대적 분포율을 빨간색(조밀)에서 녹색(희박) 그라데이션으로 나타냅니다. 계층의 FusionTablesLayerOptions heatmap 매개변수를 enabled: true로 설정하여 열지도를 활성화합니다.

참고: 퓨전 테이블 열지도는 서버측에서 렌더링됩니다. 클라이언트측 열지도를 선호한다면 열지도 계층을 대신 사용하세요.

다음 예시는 열지도를 사용하여 역사적 지진 데이터를 보여줍니다.

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

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.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'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

퓨전 테이블 예시 보기

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

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