모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

데이터 시각화: 지진 지도

개요

이 튜토리얼에서는 Google 지도에서 데이터를 시각화하는 방법을 보여줍니다. 예를 들어, 이 튜토리얼의 지도에서는 지진과 그 진도에 대한 데이터를 시각화합니다. 데이터 소스에 사용할 수 있는 기법을 배우고, Google 지도에서 아래와 같은 멋진 작품을 만들어 보세요.

위에 나오는 처음 두 프레임(왼쪽에서 오른쪽)은 기본 마커크기가 지정된 원으로 지도를 표시합니다. 마지막 프레임은 열지도를 표시합니다.

데이터 가져오기

이 튜토리얼에서는 미국지질조사국(USGS)의 실시간 지진 데이터를 사용합니다. USGS 웹사이트에서는 다양한 형식의 데이터를 제공하므로, 애플리케이션이 로컬로 액세스할 수 있도록 데이터를 자신의 도메인에 복사할 수 있습니다. 이 튜토리얼에서는 script 태그를 문서 헤드에 추가하여 USGS 서버로부터 JSONP를 직접 요청합니다.

참고: 교차 도메인 콘텐츠를 로드할 경우 잠재적인 보안 위험이 따르므로, 완전히 신뢰하는 서버로부터만 데이터를 요청해야 합니다.

// Create a script tag and set the USGS URL as the source.
        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);

기본 마커 배치

USGS 피드로부터 지진 위치 관련 데이터를 애플리케이션으로 가져와서, 이 데이터를 지도에 표시할 수 있습니다. 이 섹션에서는 모든 지진 발생 위치의 진앙에 기본 마커를 배치하기 위해, 가져온 데이터를 사용하여 지도를 생성하는 방법을 보여줍니다.

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

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>

도형 및 열지도를 사용하여 지도 사용자 지정

이 섹션에서는 지도에서 풍부한 데이터세트를 사용자 지정하는 여러 방법을 보여줍니다. 이 튜토리얼의 이전 섹션에서 만들었던 지도를 가정해 봅시다. 이 지도는 모든 지진 발생 위치에 마커를 표시합니다. 추가적인 데이터(예: 가장 많은 지도가 발생한 위치, 진도 또는 깊이)를 시각화하기 위해 마커를 사용자 지정할 수 있습니다.

다음은 기본 마커를 사용자 지정하기 위한 몇 가지 옵션입니다.

  • 원 크기 사용:
    기호를 사용하여 지진 진도의 상대적인 크기를 원(또는 기타 도형)으로 표시할 수 있습니다 . 이 경우 가장 강력한 지진이 지도상에 가장 큰 원으로 표현됩니다.

  • 열지도 사용:
    시각화 라이브러리의 열지도 계층은 지진 분포를 표시할 수 있는 단순하면서도 뛰어난 방법입니다. 열지도는 색상을 사용하여 특정 지점의 밀도를 표현하므로, 지진이 활발한 지역일수록 더 쉽게 눈에 띕니다. 열지도는 또한 WeightedLocations를 사용하므로, 가령 더 큰 지진이 발생할수록 열지도에서 더욱 눈에 띄게 표시됩니다.

원 크기

아래 지도는 원을 사용하여 사용자 지정된 마커를 표시합니다. 특정 위치에서 지진 진도가 증가하면 원 크기가 증가합니다.

아래 섹션에서는 사용자 지정된 원 마커를 포함한 지도를 만드는 데 필요한 전체 코드를 표시합니다.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    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);

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}
<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: {lat: -33.865427, lng: 151.196123},
          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);

        map.data.setStyle(function(feature) {
          var magnitude = feature.getProperty('mag');
          return {
            icon: getCircle(magnitude)
          };
        });
      }

      function getCircle(magnitude) {
        return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .2,
          scale: Math.pow(2, magnitude) / 2,
          strokeColor: 'white',
          strokeWeight: .5
        };
      }

      function eqfeed_callback(results) {
        map.data.addGeoJson(results);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

코드 이해하기

아래 표에서는 원 마커를 만드는 코드에 대해 설명합니다.

코드 및 설명
  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });

getCircle() 함수를 호출하는 스타일을 데이터 계층에 추가합니다.
해당 지점에 대해 빨간색 기본 마커 대신 사용자 지정 이미지를 만듭니다.
function getCircle(magnitude) {
      var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: magnitude
      };
      return circle;
    }

지진의 magnitude 속성이 이 함수에 전달됩니다.
getCircle()는 진도 값이 클수록 그 크기가 커지는 원을 그리며, 이 원을 지진의 사용자 지정 마커로 사용합니다.

열지도

열지도를 사용하면 USGS가 발표하는 지진 분포를 시청자가 쉽게 이해할 수 있습니다. 열지도는 각 진앙에 마커를 배치하는 대신 색상과 도형을 사용하여 데이터의 분포를 나타냅니다. 이 예시에서 빨간색은 지진이 활발한 지역을 나타냅니다.

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

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    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);

}

function eqfeed_callback(results) {
  var heatmapData = [];
  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]);
    heatmapData.push(latLng);
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    dissipating: false,
    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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" async defer></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: {lat: -33.865427, lng: 151.196123},
          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);

      }

      function eqfeed_callback(results) {
        var heatmapData = [];
        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]);
          heatmapData.push(latLng);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          dissipating: false,
          map: map
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

코드 이해하기

아래 표에서는 열지도를 만드는 코드에 대해 설명합니다.

코드 및 설명
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key
=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

visualization 라이브러리는 열지도를 표시하는 데 사용되며
여기에는 HeatmapLayer 클래스가 포함됩니다.
라이브러리를 사용 중인 경우, Maps API JavaScript가 호출될 때 이 라이브러리를 로드해야 합니다.
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      heatmapData.push(latLng);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

이전 예시와 마찬가지로, USGS 데이터가 eqfeed_callback 함수에 전달됩니다.
이 함수는 각 지진의 좌표를 heatmapData 배열에 추가합니다.
그리고 이 배열이 HeatmapLayer 생성자에 전달되고 이 생성자가 열지도를 만들어 지도에 표시합니다.
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      var magnitude = results.features[i].properties.mag;
      var weightedLoc = {
        location: latLng,
        weight: Math.pow(2, magnitude)
      };
      heatmapData.push(weightedLoc);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

진도에 따라 결과에 가중치를 부여하려면 WeightedLocation 객체를 heatmapData 배열에 전달할 수 있습니다.

추가 정보

다음 항목에 대해 자세히 읽어보세요.

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

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