Google Map API사용 #

본 소개는 jsp & 자바스크립트상에서 구글맵을 이용하여 Geographic Information Systems (GIS)를 표현하는 방법이며, geocode 쿼리 요청에 따라 무료 및 제한적인 사용을 할 수 있다.

먼저 jsp에 상단에 google mpas api를 로드해준다. 뒤에 파라미터값은 변경될 수 있다. 예를들면 language=ko로 하면 맵에 표시되는 언어가 한글이 된다. 명시하지 않으면 웹어플리케이션에 맞게 언어가 자동설정된다.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&language=en"></script>

본 방법에 무수히 많은 지역에 대한 정보만 가지고 있으며 그정보를 이용하여 구글맵에 표현을 한다고 가정한다.

먼저 주요 코드를 보자. 첫번째로 지역에 대해 geocode값을 가져오는 부분이다. 이 함수를 이용하여 무수히 많은 지역에 대한 위도,경도 정보를 DB에 저장을 한다. 이 함수는 2가지 제약이 있다. 빠른시간안에 쿼리를 지속적으로 날리면 쿼리제한 에러가 발생한다. 그리고 일일 사용 쿼리가 2,500번 이상이면 사용에 제한이 있다고 구글에서 명시하고 있다. 매번 geocode를 조회하는 불편함을 줄이고 퍼포먼스 향상을 위해 DB에 저장하고 신규 지역이 있을때만 아래 코드를 실행하면 최적의 시스템을 구현할 수 있다.

function searchGeocode(region){
    geocoder.geocode({'address': region}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT || status == google.maps.GeocoderStatus.OK) {
            document.searchVO.nation.value=region;
            document.searchVO.lat.value = results[0]['geometry']['location']['lat']();
            document.searchVO.lng.value = results[0]['geometry']['location']['lng']();
        }else{
            alert(region + " is not found.");
        }
    });
}

두번째로 DB에 저장된 값을 조회해 구글맵에 뿌려주는 부분이다. 먼저 DB에서 지역, 지역카운트, 위도, 경도에 대한 부분을 모두 배열로 가지고 온 뒤 split를 통해 각 지역에 대한 위도 경도 카운트 정보를 맵에 뿌린다.

var map;
var pointArray, heatmap;
var heatMapData = [];
var marker;

function geocode(_sido, _sidoCnt, _lat, _lng) 
{   
    var sido = _sido.split(","); 
    var sidoCnt = _sidoCnt.split(","); 
    var lat = _lat.split(","); 
    var lng = _lng.split(","); 
    if(_sido == "null" && _lat == "null" && _lng == "null"){
        alert("Not found Result.");
    }else{
        for(var j in sido){
            if(sido[j] == "null" || sidoCnt[j] == "null" || lat[j] == "null" || lng[j] == "null"){
                //
            }else{
                onGeocodeResult(sido[j], sidoCnt[j], lat[j], lng[j]);
            }
        }
    }

    heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatMapData,
          radius: 40,
          dissipating: true
    });
    heatmap.setMap(map);
}


function onGeocodeResult(sido, sidoCnt, lat, lng, content){
    marker = new google.maps.Marker({  
        map:map,
        draggable:false,
        animation:google.maps.Animation.DROP,
        position: new google.maps.LatLng(lat, lng) ,
        title:sido//'Click to statics'
    });

    var weightedLoc = {      
            location: new google.maps.LatLng(lat, lng),     
            weight: 2 * sidoCnt//Math.pow(2,sidoCnt)    
    };

    heatMapData.push(weightedLoc);
}

jsp부분에는 다음과 같이 명시해주면 맵이 뜨게 된다.

<table>     
    <div id="map_div"></div>
</table>

다음으로 jsp가 로딩될때 구글 맵을 생성해주는 부분이다. 위의 코드보다 제일 먼저 실행되며 이 구문이 포함되어 있지 않으면 구글맵을 사용할수 없다.

<script>
$(document).ready(function(){
    var myLatlng = new google.maps.LatLng(36, 127.5 );
      var myOptions = {
        zoom: 7,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_div"), myOptions);
});

구글 GIS 적용 이미지 #