구글 맵 Google Maps (3) - 실시간 데이터를 활용한 지도 그리기 (지진 강도에 따라 커지는 원)
앞에서 다룬 소스를 일부 수정하여 기본 아이콘 이외의 방법으로 실시간 진원지 정보를 표현해보자.
지진의 진도에 따라 커지는 원을 표현해보자.
이는 아래 소스에서 보듯이 icon: getCircle(earthquake.properties.mag) 을 이용하여 표현할 수 있다.
<!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,icon: getCircle(earthquake.properties.mag)
});
}}
<!-- 함수 getCircle()을 통해 지도의 진도 속성을 아이콘 형태로 전달 -->function getCircle(magnitude){
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "red",
fillOpacity: 0.2,
scale: Math.pow(2,magnitude) / 3.14,
strokeColor: "white",
strokeWeight: .5
};
return circle;
}</script>
</head>
<!-- onload 이벤트시 지도 객체 초기화 --><body onload="initialize()">
<!-- 지도를 담을 map_canvas 라는 요소 생성 -->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
