이제 실시간으로 데이터를 전송받아 지도에 마킹하는 방법을 알아보자.
아래는 USGS(미지질조사국)의 실시간 지진데이터를 받아 각각의 진원지에 기본 아이콘을 표시해주는 소스다.
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><br />
<html>
<head><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>
'프로그래밍 Programming' 카테고리의 다른 글
| 구글 맵 Google Maps (4) - 실시간 데이터를 활용한 지도 그리기 (히트맵 Heatmap 의 적용) (0) | 2015.01.23 |
|---|---|
| 구글 맵 Google Maps (3) - 실시간 데이터를 활용한 지도 그리기 (지진 강도에 따라 커지는 원) (0) | 2015.01.22 |
| 구글 맵 Google Maps (1) - 기본 맵 그리기 (0) | 2015.01.22 |
| phpliteadmin 에서 sqlite3 alter table 에러날 때 (0) | 2015.01.17 |
| 우분투(Ubuntu)에서 아파치(apache2) 실행하기 (0) | 2015.01.15 |