모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

데이터를 지도로 가져오기

개요

로컬 또는 원격 원본에서 GeoJSON 데이터를 가져와서 지도에 표시하는 방법에 대해 알아봅니다. 이 튜토리얼은 아래 지도를 사용하여 지도에 데이터를 가져오는 다양한 기법을 보여줍니다.

아래 섹션에서는 이 튜토리얼에서 지도를 만드는 데 필요한 전체 코드를 표시합니다.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: 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>

체험해 보기

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

<!DOCTYPE html>
<html>
  <head>
    <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>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

데이터 로드

이 섹션은 Maps JavaScript API 애플리케이션과 동일한 도메인 또는 다른 도메인에서 데이터를 로드하는 방법을 보여줍니다.

동일한 도메인에서 데이터 로드

Google 지도 데이터 계층은 (GeoJSON을 비롯한) 임의의 지리 공간 데이터를 위한 컨테이너를 제공합니다. 데이터가 Maps JavaScript API 애플리케이션과 동일한 도메인에서 호스팅되는 파일에 있는 경우 map.data.loadGeoJson() 메서드를 사용하여 해당 데이터를 로드할 수 있습니다. 파일은 동일한 도메인에 있어야 하지만 다른 하위 도메인에서 호스팅할 수 있습니다. 예를 들어, www.example.com에서 files.example.com에 대한 요청을 할 수 있습니다.

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

도메인 간 데이터 로드

도메인 구성상 허용되는 경우 다른 도메인에서 데이터를 요청할 수도 있습니다. 이러한 권한에 대한 표준을 교차 원본 리소스 공유(CORS)라고 합니다. 도메인이 교차 도메인 요청을 허용한 경우 응답 헤더에 다음 선언을 포함해야 합니다.

Access-Control-Allow-Origin: *

Chrome Developer Tools (DevTools)를 사용하여 도메인이 CORS를 활성화했는지 확인합니다.

해당 도메인에서 데이터를 로드하는 것은 동일한 도메인에서 JSON을 로드하는 것과 같습니다.

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

JSONP 요청

이 기술을 사용하려면 대상 도메인이 JSONP 요청을 지원해야 합니다.

JSONP를 요청하려면 createElement()를 사용하여 script 태그를 문서의 헤드에 추가합니다.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

스크립트가 실행되면 대상 도메인이 일반적으로 callback()이라는 다른 스크립트에 대한 인수로 데이터를 전달합니다. 대상 도메인은 콜백 스크립트 이름을 정의하는데, 이 이름은 브라우저에서 대상 URL을 로드할 때 페이지의 첫 번째 이름에 해당합니다.

예를 들어, 브라우저 창에서 http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp를 로드하여 콜백 이름을 eqfeed_callback로 표시합니다.

코드에 콜백 스크립트를 정의해야 합니다.

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

addGeoJson() 메서드를 사용하여 지도에 파싱된 GeoJSON 데이터를 배치합니다.

데이터 스타일 지정

GeoJSON 데이터를 지도 객체에 추가하여 데이터의 모양을 변경할 수 있습니다. 데이터 스타일 지정에 대한 자세한 내용은 개발자 가이드를 참조하세요.

자세히 알아보기

  • GeoJSON은 JSON(JavaScript Object Notation)에 기반하여 지리 데이터를 인코딩하는 데 널리 사용되는 개방형 형식입니다. JSON 데이터용으로 고안된 JavaScript 도구 및 메서드도 GeoJSON과 함께 작동합니다. 자세한 내용은 개발자 가이드를 참조하세요.
  • JSONP는 padded JSON의 약자입니다. 이는 다른 도메인의 서버에서 데이터를 요청하기 위해 웹 브라우저에서 실행되는 JavaScript 프로그램에서 사용하는 통신 방법입니다.

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

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