Google 지도 API를 사용한 자바스크립트 지리적 위치 추적
Published: 2024-05-31 14:35:46

모든 키워드가 완벽하게 포함된 업데이트된 블로그 게시물을 확인하세요.

이 글은 Google Maps JavaScript API와 PubNub를 사용하여 위치 정보 기능을 갖춘 실시간 웹 애플리케이션을 만드는 방법에 대한 4편으로 구성된 시리즈의 마지막 글입니다. 이 튜토리얼에서는 JavaScript와 PubNub를 사용하여 비행 경로를 생성하는 사용자 경험을 안내합니다.

이 모든 것이 어떻게 구현되는지 예시를 보려면 PubNub 웹사이트의 [쇼케이스 데모를](https://showcase.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) 확인하세요. 위치 정보 데모로 이동하여 PubNub와 실시간 트래킹을 통합하는 방법을 확인하세요. 데모 이면의 코드를 보려면 [깃허브에서](https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/geolocation) 모든 것이 어떻게 작동하는지 확인하세요.

비행 경로란 무엇인가요?
-------------

이 **튜토리얼에서** 구현된 비행 경로는 **모바일 디바이스나** 웹 브라우저에 있는 지도에서 **사용자가 지정한 지점을 통과하는 경로를 동적으로 그릴** 수 있는 **폴리라인을** 의미합니다. 폴리라인은 이동 패턴을 추적하기 위해 **HTML5 지리적 위치 API** 및 **Google 지도 API에** 필수적인 요소입니다.

튜토리얼 개요
-------

[1,](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) [2](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko), [3부](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko)( )에서 [JavaScript 환경을 설정하고](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) [지도 마커와](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) [위치 추적에](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) 대해 다룬 사전 요구 사항을 완료했는지 확인하세요.

완료했으면 다음 파트로 넘어가세요.

코드 연습
-----

먼저 지도, 마커 및 폴리라인 **좌표** 객체를 보유할 \`let\` 변수 \`map\`, \`mark\` 및 \`lineCoords\`를 정의해 보겠습니다. 이렇게 하면 PubNub 이벤트가 들어올 때 이를 조정할 수 있습니다. 그 후, 로드 준비가 되면 [구글 지도 자바스크립트 API에서](https://developers.google.com/maps/documentation/javascript/overview) 사용할 수 있는 \`initialize\` 콜백을 정의합니다. YOUR\_GOOGLE\_MAPS\_API\_KEY\`를 실제 **API 키로** 바꿔야 합니다.

```js
let map;
let mark;
let lineCoords = [];
let initialize = function() {
  map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
  mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize;
```

이제 'redraw' 이벤트 핸들러를 사용하여 geolocation의 \`getCurrentPosition()\` 메서드를 호출하여 새 위치 정보를 즉시 업데이트합니다.

### 위도/경도

다음으로, 새로운 위치 변경 이벤트가 즉시 발생할 때마다 호출할 redraw 이벤트 핸들러를 정의합니다. 함수의 첫 번째 부분에서는 위도와 경도를 메시지의 새 값으로 설정합니다. 그런 다음 지도, 마커 및 폴리라인 객체에서 적절한 메서드를 호출하여 위치를 업데이트하고 라인의 끝에 추가하고 지도를 최신으로 업데이트합니다.

```js
var redraw = function(payload) {
  lat = payload.message.lat;
  lng = payload.message.lng;
  map.setCenter({lat:lat, lng:lng, alt:0});
  mark.setPosition({lat:lat, lng:lng, alt:0});
  lineCoords.push(new google.maps.LatLng(lat, lng));
  var lineCoordinatesPath = new google.maps.Polyline({
    path: lineCoords,
    geodesic: true,
    strokeColor: '#2E10FF'
  });
  lineCoordinatesPath.setMap(map);
};
```

PubNub 초기화
----------

콜백을 정의한 후에는 **iOS, Android, JavaScript, .NET, Java, Ruby, Python, PHP** 등과 같은 기술 스택에서 **휴대폰, 태블릿, 브라우저**, **노트북에서** 작동하는 PubNub 실시간 데이터 스트리밍 기능을 초기화합니다.

```js
const pnChannel = "map3-channel";
const pubnub = new PubNub({
  publishKey:   'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
```

실시간 채널에서 주제를 **게시하고** **구독할** 수 있는 PubNub의 기능은 효율적인 데이터 스트리밍 기능을 제공합니다.

위도/경도 게시하기
----------

이 간단한 튜토리얼에서는 현재 시간을 기준으로 새 위치를 게시하는 기본 JavaScript 간격 타이머를 설정해 보겠습니다. 500밀리초마다 새로운 위도/경도 객체(북동쪽으로 이동하는 좌표 포함)를 지정된 PubNub 채널에 게시하는 익명 콜백 함수를 호출합니다. 앱에서는 실시간 디바이스 위치 또는 사용자가 보고한 위치에서 위치를 가져올 가능성이 높습니다.

```js
setInterval(function() {
  pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 500);
```

마지막으로, 마지막에 구글 지도 API를 초기화하여 DOM 요소와 자바스크립트 전제 조건이 충족되었는지 확인합니다.

```js
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_GOOGLE_MAPS_API_KEY&callback=initialize"></script>
```

마무리
---

이 튜토리얼 시리즈를 통해 웹 및 모바일 앱에서 실시간 위치 추적을 위해 [Google Maps API와](https://developers.google.com/maps/documentation/javascript/overview) [PubNub가](https://www.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) 어떻게 함께 작동하는지 살펴봤습니다. 이는 **Uber나** **Lyft와** 같은 차량 호출 서비스가 차량의 움직임을 실시간으로 보여주는 방식과 유사합니다.

PubNub 체험하기
-----------

[라이브 투어를](https://www.pubnub.com/tour/introduction/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) 통해 5분 이내에 모든 PubNub 기반 앱의 핵심 개념을 이해해 보세요. [GitHub 페이지와](https://github.com/PubNubDevelopers) 웹사이트에서 제공되는 사용 후기를 통해 사용자들의 경험을 직접 들어보세요.

설정하기
----

PubNub [계정에](https://admin.pubnub.com/#/login?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기
----

사용 사례에 관계없이 [PubNub 문서를](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ko) 통해 바로 시작하고 실행할 수 있습니다. 자바스크립트 Google 지도 API 전용 섹션과 SDK에서 실시간 추적과 함께 사용하는 방법을 확인할 수 있습니다.