Google 지도 API를 사용한 자바스크립트 지리적 위치 추적
Published: 2024-02-28 20:05:53

_이 글은 JavaScript Google Maps API와 PubNub를 사용하여 웹 및 모바일 웹용 위치 추적 기능이 있는 실시간 지도를 구축하는 4부작 시리즈 중 2부입니다._

지도 마커란 무엇인가요?
-------------

이 튜토리얼에서는 웹 또는 모바일 웹 지도에 지도 마커를 추가해 보겠습니다. 지도 마커는 지도에서 사용자 또는 디바이스의 위치를 식별하는 데 사용됩니다. 기능을 시작하기 위해 맵에 하나의 맵 마커를 배치하고 그 위치를 무작위로 업데이트하겠습니다. 다음 부분에서는 실제 디바이스 위치를 기반으로 맵 마커를 이동해 보겠습니다.

![javascript_mapmarker](https://images.ctfassets.net/3prze68gbwl1/asset-17suaysk1qa1k12/d3521204222e8e1ef529a489ea3aaf8b/pubnub_javascript_mapmarker.gif "javascript_mapmarker")

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

아직 시작하지 않았다면 먼저 [1부에서](https://pubnub.com/blog/javascript-mapping-javascript-tracking/) 다룬 몇 가지 전제 조건을 처리해야 합니다. 여기에는 다음이 포함됩니다:

-   게시 및 구독 키를 포함한 PubNub 애플리케이션 만들기
-   Google 지도 API 프로젝트 및 자격 증명 만들기

[이 예제의 코드는 여기에서 코드펜으로 사용할 수](https://codepen.io/team/PubNub/pen/GOVqpr) 있습니다.

코드 연습
-----

이 코드 구조는 과거에 HTML5 애플리케이션으로 작업해 본 적이 있다면 익숙할 것입니다. 일반 HTML5 애플리케이션으로 시작하여 실시간 통신을 위한 PubNub 라이브러리와 최소한의 스타일링을 위한 부트스트랩 CSS를 포함합니다.

```js
<!doctype html>
<html>
  <head>
    <title>Google Maps Tutorial</title>
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  </head>
  <body>
```

Google Maps API가 어디에 포함되어 있는지 궁금하다면 HTML5 페이지 맨 끝에 있습니다. 이렇게 하면 지도 코드에서 전체 DOM을 사용할 수 있습니다.

다음으로 애플리케이션을 위한 DIV를 만들고 그 안에 지도를 담을 DIV를 만듭니다. 여기서는 너비와 높이에 인라인 CSS를 사용합니다. 실제 프로덕션급 애플리케이션에서는 이 스타일을 다른 곳에서 정의할 가능성이 높습니다. 이것이 바로 지도 캔버스 DOM 요소를 정의한 후 Google 지도 스크립트를 포함하고자 할 때 이야기했던 것입니다.

```js
<div class="container">
  <h1>PubNub Google Maps Tutorial - Live Map Marker</h1>
  <div id="map-canvas" style="width:600px;height:400px"></div>
</div>
```

이제 처리해야 할 자바스크립트가 많이 있습니다. 한 번에 한 단계씩 살펴봅시다.

### 위도/경도

먼저 샌프란시스코 인근의 초기 위도와 경도를 설정합니다. 그런 다음 현재 시간을 기준으로 원의 한 점을 제공하는 함수를 정의합니다. 반경(위도/경도 단위)을 정의합니다. 시간(에포크 초)을 입력합니다.

삼각함수의 마법을 통해 원의 점은 x = "초기 경도에 입력값의 코사인을 더한 값에 반지름을 곱한 값", y = "초기 위도에 입력값의 사인을 더한 값에 반지름을 곱한 값"으로 주어집니다. 편의를 위해 위도와 경도를 위도와 경도 값으로 포함하는 JavaScript 객체를 반환합니다.

```js
<script>
window.lat = 37.7850;
window.lng = -122.4383;
function circlePoint(time) {
  var radius = 0.01;
  var x = Math.cos(time) * radius;
  var y = Math.sin(time) * radius;
  return {lat:window.lat + y, lng:window.lng + x};
};
```

### 맵 마커 위치 이동

이제 수학적 계산을 마쳤으니 이제 중요한 내용을 살펴보겠습니다. PubNub 이벤트가 들어올 때 즉시 조작할 수 있도록 맵과 마커 객체를 보관할 맵 및 마크 변수를 정의합니다. 그런 다음 Google Maps JavaScript API가 로드될 준비가 되면 호출할 수 있는 초기화 콜백을 정의하고 창 객체의 멤버가 되어 API에서 액세스할 수 있도록 합니다.

```js
var map;
var mark;
var 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;
```

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

```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});
};
```

### 지도를 PubNub에 연결하기

이제 콜백을 정의했으므로 PubNub 실시간 데이터 스트리밍 기능을 초기화할 수 있도록 필요한 모든 메커니즘을 갖추었습니다. 먼저, 새로운 위치 업데이트가 도착할 채널 이름을 결정합니다. 그런 다음 전제 조건의 [1단계에서](https://pubnub.com/blog/javascript-mapping-javascript-tracking/#pubnub-setup) 설정한 게시 및 구독 키를 사용하여 PubNub 라이브러리를 초기화합니다.

마지막으로 PubNub 라이브러리에 적절한 채널을 구독하도록 지시하고 수신 이벤트에 대한 리스너로 다시 그리기 함수를 첨부합니다. 이러한 이벤트는 어떻게 생성되나요?

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

이 간단한 튜토리얼에서는 현재 시간을 기준으로 새 위치를 게시하는 기본 자바스크립트 간격 타이머를 설정합니다. 500밀리초마다 익명 콜백 함수를 호출하여 지정된 PubNub 채널에 새 위도/경도 객체(circlePoint() 호출로 생성됨)를 게시합니다.

```js
setInterval(function() {
  pubnub.publish({channel:pnChannel, message:circlePoint(new Date().getTime()/1000)});
}, 500);
</script>
```

### Google 지도 초기화

마지막으로, 마지막에 Google Maps API를 초기화하여 DOM 요소와 JavaScript 전제 조건이 충족되었는지 확인합니다.

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

다음 단계
-----

이제 자바스크립트 지도 애플리케이션이 완성되었고 지도 마커를 그릴 수 있습니다. 다음 단계는 디바이스의 위치를 감지하고 실시간으로 플로팅하여 위치 변화에 따라 이동하는 것으로, 이 [부분은 3부 지리적 위치](https://pubnub.com/blog/javascript-google-maps-api-location-publishing/)에서 다룰 것입니다!

관련 용어
-----

-   [길찾기 API](https://www.pubnub.com/learn/glossary/what-is-a-directions-api/)
    
-   [GIS](https://www.pubnub.com/learn/glossary/what-is-a-geographic-information-system-gis/)
    
-   [지도 API](https://www.pubnub.com/learn/glossary/what-is-a-map-api/)
    
-   [위치 정보 API란 무엇인가요?](https://www.pubnub.com/learn/glossary/what-is-a-geolocation-api/)
    

#### 목차

[지도 마커란 무엇인가요](#h-0)?[튜토리얼 개요코드](#h-1)[연습위도/경도](#h-3)[지도 마커 위치](#h-4)[이동지도와 PubNub](#h-5)[연결하기Google 지도 초기화다음](#h-6)[단계관련](#h-7)[용어](#h-8)

펍넙이 어떤 도움을 줄 수 있나요?
===================

이 문서는 원래 [PubNub.com에](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers) 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 기기를 위한 실시간 상호작용을 구축, 제공, 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 월간 8억 명의 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한 또는 트래픽 폭증으로 인한 지연 문제를 걱정할 필요가 없습니다.

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

[라이브 투어를](https://www.pubnub.com/tour/introduction/) 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기
----

PubNub [계정에](https://admin.pubnub.com/signup/) 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기
----

사용 사례나 [SDK에](https://www.pubnub.com/docs) 관계없이 [PubNub 문서를](https://www.pubnub.com/docs) 통해 바로 시작하고 실행할 수 있습니다.