1 Tizen 웹 응용 프로그램에서 Google Maps 사용

Google Maps 서비스는 지도 서비스로 잘 알려져 있습니다. 이를 사용하면 응용 프로그램에서 Google 위치 기반 서비스에 액세스할 수 있습니다. 직관적인 UI, 좋은 사용자 경험, 위치 찾기, 방향 계산, 교통 상황 묘사, Google Street View 이미지 검토 등의 다양한 서비스를 제공합니다. 최근에 출시된 Google Street View 서비스로 웹 응용 프로그램에 Street View 파노라마 이미지도 포함시킬 수 있습니다. Google은 매우 유연한 JavaScript API와 HTTP 기반 웹 서비스를 제공하여 이러한 기능을 사용합니다. 한편, HTML5 W3C Geolocation API를 사용하여 장치로부터 위치 데이터를 가져올 수 있습니다. 이 문서에서는 Google Maps API와 함께 이 작업을 수행할 수 있는 방법을 보여줍니다. 웹 응용 프로그램에서 Google Maps를 사용하는 두 가지 방법이 있습니다.

• 기존 Google Maps 웹 서비스(HTTP API 호출) 사용: Google 서버로부터 데이터를 받으면 AJAX 호출의 콜백을 구현해야 합니다. 원격 서버에서 데이터를 가져오기 위해 AJAX 호출을 사용하면 동일 출처 정책으로 인해 어려울 수도 있습니다. Tizen 웹 브라우저를 통해 보안 제한에 관계없이 AJAX 호출을 보낼 수 있습니다.
• Google Maps API v3 사용:  완벽한 기능을 갖춘 위치 기반 응용 프로그램을 개발하는 데 필요한 모든 JavaScript API를 제공합니다.

본 문서에서는 위의 경우를 모두 다룰 것입니다.

2 필수 요소

첨부된 예제 응용 프로그램은 Google Maps Web Service, Google Maps API, W3C Geolocation API를 활용합니다. UI는 jQuery Mobile 1.2.0 프레임워크를 기반으로 합니다. jQuery Mobile 프레임워크를 사용하면 직관적이고 일관된 사용자 인터페이스와 확장성이 높은 웹 응용 프로그램을 만들 수 있습니다. JQuery Mobile을 사용할 수 있으려면 응용 프로그램에 jQuery 1.8.0 라이브러리가 포함되어 있어야 합니다. 샘플 응용 프로그램의 Tizen SDK 2.0.0a2에서 테스트되었습니다. JQueryMoible 프레임워크를 사용하는 방법에 대한 자세한 내용은 여기(http://jquerymobile.com/)를 참조하십시오.

샘플 응용 프로그램 스크린 샷

3 기본 Google Maps 및 Geolocation 기능

이 문서에서는 Tizen 웹 응용 프로그램에서 Google Maps API와 Google Maps 웹 서비스의 기능을 사용하는 방법을 보여줍니다. 위치 기반 응용 프로그램에서 장치의 현재 위치를 확인하고자 할 수도 있습니다. W3C Geolocation API를 사용하여 현재 위치를 얻을 수 있으며, Tizen에 의해 지원됩니다. 현재 위치를 확보하면 해당 위치를 지도의 중심으로 설정할 수 있습니다. 첨부된 예제 응용 프로그램은 작업을 수행하는 방법을 보여줍니다. 사용자는 "위치 검색"에 대해 이야기하고 실제로 사람이 읽을 수 있는 주소에서 지리학적 좌표로 변환을 수행합니다. 이러한 과정을 지오코딩이라 합니다. 또한 Google Maps는 Google Distance Matrix라는 서비스를 제공합니다. 2개의 주어진 위치 간의 거리와 다양한 교통 수단(예: 자동차 또는 도보)으로 목적지까지 걸리는 시간을 계산할 수 있습니다. 또한 Google은 Google Street View 서비스를 제공하고 그것은 점점 더 인기를 끌고 있습니다. Tizen 웹 응용 프로그램에서도 일부 기능을 사용할 수 있습니다. 경고: 작성 시 모든 Street View 기능이 Tizen에 의해 지원되지 않습니다(파노라마 뷰 새로 고침 등). 수동 뷰 기능을 제공하는 Google Street View Image API만 사용하는 것이 좋습니다. 본 문서의 뒷부분에서 사용 방법을 보여줍니다.  

a) 위치 획득

W3C Geolocation API를 사용하여 GPS 데이터를 기반으로 사용자의 위치를 가져올 수 있습니다. 이 API를 사용하여 한 번에 하나의 위치를 요청하거나 사용자의 실시간 위치를 추적할 수 있습니다. 아래는 GPS 위치 수동 방법을 요청하는 방법의 예제 코드입니다. 하지만 이 방법으로 실시간 위치 업데이트(예: 사용자의 위치 추적)를 얻는 것을 권장하지 않습니다. 이 작업을 수행하는 navigator.geolocation 개체에서 사용할 수 있는 다른 API가 있습니다(navigator.geolocation.watchPosition).

navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Latitude: ' + position.coords.latitude  + 'Longitude: ' + position.coords.longitude);
}, function(error) {
    console.error('GPS error occurred');
});

b) 기본 Google Map 보기

사용자의 현재 위치를 획득하면 지도를 표시할 수 있습니다. 사용자의 예에서 기본 Google Map 보기를 사용합니다. 웹 사이트에서 사용하는 것과 정확히 같은 방법으로 Tizen의 지도 보기를 사용할 수 있습니다. 먼저 지도에 대한 컨테이너를 만듭니다.

그런 다음 이 컨테이너에 대한 CSS 스타일 시트를 만듭니다. 일반적으로 맵 컨테이너에 백분율 값을 제공합니다. 전체 화면의 최대 100% 폭과 넓이일 수 있습니다. 그 후 지도 옵션 개체를 사용하여 지도를 초기화합니다. Google Street View 기능 해제 팁(본 문서의 끝에서 확인할 수 있습니다)을 기억하십시오.

var mapOptions = {
    center : new google.maps.LatLng(52.33, 54.12),
    zoom : 6, // zoom value from 0 up to 18
    mapTypeId : google.maps.MapTypeId.HYBRID,
    streetViewControl : false
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

c) 방향 획득

지도가 표시되어 있습니다. 이제 두 장소 간의 방향을 얻는 방법을 보여줍니다. 방향을 얻을 수 있는 방법에는 2가지가 있습니다.

• Google Directions Service 사용:  모든 AJAX 요청을 직접 보낼 필요가 없기 때문에 사용하기 쉬운 방법입니다.
• Google Directions API 사용: RESTful API를 통해 액세스하는 기존의 웹 서비스입니다. 이 방법은 AJAX 호출을 직접 구현해야 하기 때문에 약간 더 복잡합니다.

이 예에서는 첫 번째 방법을 사용합니다.   방향 요청을 보내려면 찾으려는 방향의 출발지 및 목적지와 선호하는 교통 수단(예: 자동차 또는 도보)을 제공하기만 하면 됩니다. 샘플 코드는 아래와 같이 표시됩니다.

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
// we assume that the map is already defined and displayed
directionsDisplay.setMap(map);
var request = {
    origin : 'Warsaw',
    destination : 'Paris',
    travelMode : google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
    if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    } else {
        console.error('Unable to get directions');
    }
});

d) 지오코딩

지오코딩 서비스는 사람이 읽을 수 있는 주소와 지리적 좌표 간의 변환을 제공합니다. Google Maps API와 Google Maps 웹 서비스가 제공하는 핵심 서비스 중 하나입니다. 이 API를 통해 Google의 데이터베이스에 액세스할 수 있습니다. 지오코딩 API로 전달된 위치는 거리 이름, 도시 이름 또는 지역 이름일 수 있습니다. 지오코딩 API는 서버에서 지리적 좌표를 반환합니다. 지오코딩된 데이터는 두 가지 방법을 사용하여 획득할 수 있습니다.

• Google Geocoding Service 사용: 모든 서버 AJAX 요청을 직접 수행할 필요가 없기 때문에 사용하기 쉬운 방법입니다.
• Google Geocoding API 사용: 단순한 HTTP GET 요청을 전송하여 액세스하는 웹 서비스입니다. 이 방법은 AJAX 호출을 직접 수행해야 하기 때문에 약간 더 복잡합니다.

이 예에서는 보다 복잡한 방법을 선택합니다. 먼저 다음 샘플 URL을 사용하여 AJAX 호출을 Google Geocoding API로 보냅니다: http://maps.googleapis.com/maps/api/geocode/json?address=[location_strin.... location_string은 지오코딩하려는 위치의 URI이 인코딩된 이름입니다. Tizen 웹 브라우저는 크로스 도메인 요청을 허용합니다. 일반 PC 브라우저에서 아래의 스크립트를 실행하는 경우 앞에서 언급된 동일 출처 정책으로 인해 실패하게 됩니다. Tizen 에뮬레이터와 시뮬레이터는 동일 출처 정책을 따르지 않습니다. AJAX 요청을 보낸 후에 반환된 지오코더 상태가 양호한지 여부를 확인하고 응답에 유효한 값이 있는지 여부를 확인해야 합니다.

var locationForGeocoding = "London";
$.ajax({
	url : 'http://maps.googleapis.com/maps/api/geocode/json?address='
			+ locationForGeocoding + '&sensor=true',
	success : function(data) {
		if (google.maps.GeocoderStatus.OK === data.status
				&& data.results.length !== 0) {
			/**
			 * We take into account only first result returned from Google Maps
			 * API
			 */
			var foundLocation = data.results[0];
			console.log(foundLocation.geometry.location.lat);
			console.log(foundLocation.geometry.location.lng);
			// here we can use procedure to create map on a given container
		} else {
			console.error("Unable to find this location!");
		}
	}
});

e) 거리 계산

이 섹션에서 사용자 주위의 가장 가까운 수도를 찾기 위해 Google Maps 거리 매트릭스를 사용하는 방법을 설명합니다.    Distance Matrix를 사용하면 2개 이상의 위치 간 거리를 계산할 수 있습니다. 예제에서 사용되는 도시 이름 “Torino” 와 같은 읽을 수 있는 주소의 위치를 정의할 수 있습니다. (이 경우에 Google Geocoding 서비스는 자동으로 주소를 지리적 좌표로 변환합니다) 또는 명시적으로 지리적 좌표를 사용할 수 있습니다. 두 가지 방법을 사용하여 거리를 계산할 수 있습니다.

• Google Distance Matrix Service 사용: 모든 서버 AJAX 요청을 직접 수행할 필요가 없기 때문에 사용하기 쉬운 방법입니다.
• Google Distance Matrix API 사용: 단순한 HTTP GET 요청을 전송하여 액세스하는 웹 서비스입니다. 이 방법은 AJAX 호출을 직접 수행해야 하기 때문에 약간 더 복잡합니다.

이 예에서는 첫 번째 방법을 사용합니다. DistanceMatrixService 개체에서 사용 가능한 getDistanceMatrix() 메서드를 사용합니다. GetDistanceMatrix() 메서드는 2개의 배열을 사용합니다. 첫 번째 배열은 출발지이고 두 번째 배열은 목적지입니다. 또한 Distance Matrix API를 사용하면 반환된 방향의 정렬 순서를 설정할 수 있습니다. 예를 들어 가장 가까운 경로를 찾을 수 있습니다.   샘플 응용 프로그램에서 가장 가까운 수도가 먼저 나타난다는 것을 의미합니다.

// this is the location given by the user
var origin = "Torino";
// this is an array with destination locations
// Google will use Geocoding to get coordinates
var locations = [{
        name : "London"
    }, {
        name : "Paris"
    }, {
        name : "Berlin"
    }, {
        name : "Moscow"
    }, {
        name : "Rome"
    }];
var service = new google.maps.DistanceMatrixService();
var destParsed=[];
// Google Distance Matrix service accepts only simple arrays, not JSON
// so we need to convert
for ( var i = 0; i < locations.length; i++) {
    destParsed[i] = locations[i].name;
}
service.getDistanceMatrix({
    origins : [ origin ],
    destinations : destParsed,
	// we are using DRIVING mode
    travelMode : google.maps.TravelMode.DRIVING,
    avoidHighways : false, // we don't want to avoid anything
    avoidTolls : false
    }, function(response, status) {
        if (status == google.maps.DistanceMatrixStatus.OK) {
            if (response.rows.length === 0) {
            console.err("Unable to get distance");
            return false;
            }
        // there is only one row so we can simply get it,
 // because there was only one origin location
        response = response.rows[0].elements;
    // because we do not want to change the original locations array
	// we can create a copy
        var locationsCopy = locations.slice();
        for (i = 0; i < locationsCopy.length; i++) {
            if (response[i].status === "OK")
                locationsCopy[i].distance = response[i].distance;
            else
            locationsCopy = locationsCopy.splice(1, i)
        }

        // sorting
        var sorted = locationsCopy.sort(function(a, b) {
            return a.distance.value - b.distance.value;
        });

        // here are our sorted results
        console.log(sorted);

        } else {
            console.error("Unable to get distance");
        }
});

f) 수동 Google Street View

이 문서에서 소개되는 마지막 기능은 Google Street View입니다.    Google Street View는 2007년에 Google에서 출시하였으며 이를 사용하면 지원되는 위치에서 파노라마 거리 이미지를 검토할 수 있습니다. 두 가지 방법으로 사용할 수 있습니다.

• Google Street View Image API 사용: 모든 사용 가능한 대상의 정적 이미지를 얻을 수 있습니다. 문자열 기반 위치를 이 API로 전달할 수 있고, 자동으로 지리적 좌표로 변환됩니다.
• Google Street View Service 사용: 모든 사용 가능한 기능으로 거리 뷰에 액세스할 수 있습니다. 이 기능은 Tizen에서 지원하지 않습니다.

첫 번째 옵션에 대한 예제 코드입니다.

// location to find the street view for
var loc = 'New York';
// your Google API key
var key = 'AIzaSyDdKjhStoKF6t0xxA_hFxYBmKrEb77b-nQ';
// if needed, we create img HTML element to put the street view in it
if ($('body').find('#streetViewImg').length === 0)
    $('body').append($(''));
// the browser will perform request for image
$('#streetViewImg').attr('src', 'http://maps.googleapis.com/maps/api/streetview?size=640x640&location=' + loc + '&sensor=true&key='+key);

var mapOptions = {
    center : new google.maps.LatLng(52.12, 54.23),
    zoom : 6,
    mapTypeId : google.maps.MapTypeId.HYBRID,
    streetViewControl : false // turns off Street View
};
var map = new google.maps.Map(document.getElementById('container'), mapOptions);

4 요약

이 문서에서는 기본 지도 표시, 위치 검색, 거리 계산, Tizen 앱 응용 프로그램에서 Street View 이미지 액세스 등 Google Maps 기능 사용 방법을 설명합니다. 또한 쉽고 편안한 방법으로 이러한 기능을 사용할 수 있도록 일부 탭을 제공합니다. 이미 본대로 이미 사용자 웹 사이트에 이러한 기능이 있는 경우 Tizen에서 작동하도록 많은 기능을 수정할 필요가 없습니다. 모바일 장치가 위치 기반 응용 프로그램에 더 적합한 환경이기 때문에 데스크탑 환경과 비교하여 모바일 장치에서 Google Maps를 사용할 때 실제로 더 많은 이득을 얻습니다.