갈루아의 반서재

이제 실시간으로 데이터를 전송받아 지도에 마킹하는 방법을 알아보자.

아래는 USGS(미지질조사국)의 실시간 지진데이터를 받아 각각의 진원지에 기본 아이콘을 표시해주는 소스다.



<!DOCTYPE html>
    <html>
      <head>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><br />

        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map_canvas { height: 100% }
        </style>
       <!-- API 획득 -->
       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
       <!-- 보여주고자 하는 지역의 위도, 경도값 입력(LatLng) -->
        <script type="text/javascript">
          function initialize() {

       <!-- 지도의 속성을 포함하는 객체 mapOptions 만들기 -->

       <!-- mapTypeId 는 지도의 유형을 나타내는 것으로 ROADMAP (기본 로드), SATELLITE (Google 어스 위성 이미지)-->   

       <!--HYBRID (일반 뷰와 위성 보기 혼합), TERRAIN (지형 정보 바탕으로 실제 지도 표시) 등의 옵션이 있음-->

            var mapOptions = {

             zoom: 2,

             center: new google.maps.LatLng(2.8,-187.3),

         mapTypeId: google.maps.MapTypeId.TERRAIN          
            };

       <!-- map 객체 만들기 -->

           map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

      <!-- 스크립트 태그 생성 및 데이터 소스 명시 -->
          var script = document.createElement('script');
         script.src = '//earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
         document.getElementsByTagName('head')[0].appendChild(script);

          }

      <!-- eqfeed_callback 라는 함수를 통해 지리 데이터 결과를 GeoJSON 함수에 전달 -->

       function eqfeed_callback(results) {
          for (var i = 0; i < results.features.length; i++) {
           var earthquake = results.features[i];
           var coords = earthquake.geometry.coordinates;
           var latLng = new google.maps.LatLng(coords[1],coords[0]);
           var marker = new google.maps.Marker({
              position: latLng,
             map: map,
             });
          }

        }
      </script>

      </head>

       <!-- onload 이벤트시 지도 객체 초기화 -->

      <body onload="initialize()">

       <!-- 지도를 담을 map_canvas 라는 요소 생성 -->

        <div id="map_canvas" style="width:100%; height:100%"></div>
      </body>
    </html>