Widget Example‎ > ‎

Google Maps


Google Maps API와 Bondi Gelocation API를 이용해서 현재위치를 지도로 표시하는 샘플을 작성하겠습니다.

Google Maps API Key 생성


아래 URL로부터 Google Maps API Key를 생성합니다. 사용하는 Web사이트의 URL은 어플리를 다운로드하는 서버의 URL을 지정합니다. 


신규 프로젝트 작성

Eclipse의 메뉴로부터 [New]-[Project]를 선택하고, [New Project]다이얼로그박스에서 "Droidget Wizards"-"project"을 선택합니다.

GPS를 사용하는 Widget을 개발하는데는 Feature에서 GPS의 설정을 해놓고 Access에 Google Map에서 사용하는 URI를 설정합니다.

그러면, Feature에 GPS가 사용 가능하도록 설정하겠습니다.



다음은 Google Maps에서 사용이 가능하도록 하기위해서,
http://maps.google.com
http://maps.gstatic.com
에 악세스 허가를 내는 설정이 필요합니다.



http://maps.google.com 에 악세스 설정을 수행합니다. 이번은 subdomain의 설정도 유효하게 하고, 서버명 이하의 http://google.com/ 을 기재합니다.


http://maps.gstatic.com 에 악세스 설정을 수행합니다. 이번은 subdomain의 설정은 유효하게 하지 않고, 서버명도 포함시킨 URI을 지정합니다.


Feature와 Access가 반영되면
<feature name="http://bondi.omtp.org/api/gelocation" /> 
<access uri="http://google.com/" subdomains="true"/>
<access uri="http://maps.gstatic.com" subdomains="false"/>
가 추가됩니다.

config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="MapSample_1279460600275" version="1.0" width="300" height="300">
    <content src="index.html" type="text/html"/>
    <name>SampleMap</name>
    <description>The sample of Google Map</description>
    <author url="http://www.gclue.jp">GClue</author>
    <icon src="icon.png"/>
    <license></license>
    <feature name="http://bondi.omtp.org/api/geolocation" />
    <access uri="http://google.com/" subdomains="true"/>
    <access uri="http://maps.gstatic.com" subdomains="false"/>
</widget>


JavaScript파일 작성

프로젝트의 src폴더에 JavaScript용의 폴더인 js폴더를 작성해서 js폴더 밑에 script.js라는 이름의 파일을 작성합니다.

src/js/script.js
function onLoad(){
    bondi.geolocation.getCurrentPosition(onPositionSuccess, onPositionError, {timeout:40000});
}

// this function will handle each position updates
function onPositionSuccess(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;

    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(lat, lon), 13);
    map.setUIToDefault();
}

// this function will handle each error in position updates
function onPositionError(error) {
    
}

index.html파일 편집

index.html이 표시되는 타이밍에 Google Maps을 표시하는 샘플을 작성합니다. 

index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Google Map Sample</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=발행된Key" type="text/javascript"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>

<body onload="onLoad()">
    <div id="map_canvas" style="width: 300px; height: 300px"></div>
</body>

</html>

패키징

다음은 패키징 작업을 수행합니다. Package Explorer의 MapSample프로젝트를 클릭한 상태에서 Eclipse의 [Droidget]-[Packaging]을 클릭하여 패키징 작업을 실행합니다.

패키징 작업이 성공하면 MapSample.wgt파일이 자동으로 생성됩니다.


USB경유한 전송

USB로 개발단말기를 접속해 놓고 Eclipse의 [Droidget]-[Packaging Install]을 클릭하여 전송 및 인스톨 작업을 실행합니다.

Web경유한 전송

완성한 MapSample.wgt를 Web경유하여 실기에 전송하기 위해서는 download용의 html파일을 작성합니다.

Download.html
<html>
<head>
    <title>Download</title>
</head>
<body>
    <a href="droidget://www.example.com/MapSample.wgt">MapSample</a><br>
</body>
</html>

실행결과



※ 본 튜토리얼에서 사용하고 있는 화면은 KDDI/auのIS01의 대기화면을 사용하고 있습니다.

Comments