반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

GPS 와 구글 맵 사용하기

2012. 12. 28. 17:18 | Posted by 솔웅


GPS and Google Maps



최신 브라우저에는 location-based 기능들이 다 있습니다. 전화기나 태블릿의 GPS 를 사용하는 기능이죠. 이것은 HTML5 의 기본 기능입니다. 그러니까 jQuery Mobile 과는 별도의 기능인거죠. 하지만 jQuery Mobile 과 함께 사용하면 아주 유용하죠. 이전 글의 데이터베이스 같이요.


geolocation 기능을 사용해서 Google Map  기능을 이용할 수도 있습니다. Google은 이를 위한 API 를 제공하고 있습니다. 개발자들은 자바스크립트를 이용해서 지구상의 어떤 곳이든 지도로 display 할 수 있습니다.


It is these two aspects we study in this chapter, in conjunction with jQuery Mobile.

이 두가지 기능에 대해 jQuery Mobile 에서는 어떻게 다루는지 오늘 다뤄 보겠습니다.


Using GPS with jQuery Mobile


GPS는 navigator.geolocation object를 통해서 구현 가능합니다. 이 object는 getCurrentPosition (ok, error) method 를 제공합니다.


  • ok (position) is a callback function called when the GPS position could be calculated. The position parameter is an object with a coords property defined by {latitude, longitude, heading, speed, altitude} containing the GPS position. This parameter is required otherwise the GPS position can not be recovered.

  • error () is a callback function called only if GPS position has not been found. This parameter is optional.


현재의 GPS 위치를 표시하기 위해 이 메소드를 사용하시면 됩니다. (예를 들어 현재의 위도와 경도를 표시하실 수 있습니다.)


Display current GPS coordinates


<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Latitude : </span> <span id=lat></span> <br />

    <span> Longitude : </span> <span id=lng></span> <br />

  </div>

</div>


</body>

</html>


<script>


navigator.geolocation.getCurrentPosition (function (pos)

{

  var lat = pos.coords.latitude;

  var lng = pos.coords.longitude;

  $("#lat").text (lat);

  $("#lng").text (lng);

});


</script>



tistory574_01.html







Integrating Google Maps in our application


구글 맵은 Google에서 제공하는 구글 맵 API 를 통해서 구현 가능합니다. 이 API에 접근하려면 HTML 페이지에 자바스크립트를 include 시키시면 됩니다.


Inclusion of the JavaScript file of Google Maps


<script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>



이전 프로그램을 변형시켜서 GPS 위치에 의해 파악된 위치를 지도에 표시하는 새로운 화면을 display 시키겠습니다. 첫번째 화면을 우리가 정하는 GPS 코드를 entering 하도록 약간 변형시키겠습니다.


View the map of the position provided by GPS


<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  <script src=http://maps.googleapis.com/maps/api/js?sensor=true></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Latitude : </span> <input type=text id=lat />

    <span> Longitude : </span> <input type=text id=lng />

    <a data-role=button id=btn>Display map</a>

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Window 2</h1>

  </div>


  <div data-role=content>

  </div>

</div>


</body>

</html>


<script>


navigator.geolocation.getCurrentPosition (function (pos)

{

  var lat = pos.coords.latitude;

  var lng = pos.coords.longitude;

  $("#lat").val (lat);

  $("#lng").val (lng);

});


$("#btn").bind ("click", function (event)

{

  var lat = $("#lat").val ();

  var lng = $("#lng").val ();

  var latlng = new google.maps.LatLng (lat, lng);

  var options = { 

    zoom : 15, 

    center : latlng, 

    mapTypeId : google.maps.MapTypeId.ROADMAP 

  };

  var $content = $("#win2 div:jqmData(role=content)");

  $content.height (screen.height - 50);

  var map = new google.maps.Map ($content[0], options);

  $.mobile.changePage ($("#win2"));

  

  new google.maps.Marker ( 

  

    map : map, 

    animation : google.maps.Animation.DROP,

    position : latlng  

  });  

});


</script>


tistory574_02.html


텍스트 필드에 위도 경도 좌표를 넣으면 그 값을 받아올 겁니다. (디폴트로는 GPS 에서 얻은 값이 표시 됩니다. 파라미터에서 google.maps.Map object 를 생성하면 해당 위치의 지도가 display 될 겁니다. 지도를 표시할 <div> element 의 높이를 지정하는 부분을 잘 봐 두세요. (여기서는 두번째 화면의 content 입니다.)


여기에 해당 위치에 Marker 를 표시하기 위해 google.maps.Marker object를 생성했습니다. 이것은 옵션이지만 지도에서 해당 위치를 찾는데 아주 유용한 기능입니다.



반응형

Comment