Google Maps APIを使ったJavaScriptの位置情報トラッキング
Published: 2024-05-31 14:22:55

キーワードをシームレスに埋め込んだ最新のブログ記事はこちら。

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=ja)チェックしてください。リアルタイムトラッキングでPubNubをどのように組み込むかについては、Geolocationデモに移動します。デモのコードは[Githubを](https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/geolocation)ご覧ください。

フライトパスとは何ですか？
-------------

この**チュートリアルで**実装されているフライトパスは**ポリラインの**ことで、**モバイルデバイスや**ウェブブラウザ上の地図上に**ユーザーが指定したポイントを通るパスを動的に描画**することができます。このポリラインは、**HTML5 Geolocation APIと** **Google Maps APIに**不可欠であり、移動パターンを追跡します。

チュートリアルの概要
----------

[パート1、](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja) [2](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)、[3](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)、、[JavaScript環境のセットアップ](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)、[マップマーカーと](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja) [ロケーショントラッキングについて](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)説明しました。

それができたら、次のパートに進んでください。

コードのチュートリアル
-----------

まずは \`let\` 変数 \`map\`、\`mark\`、\`lineCoords\` を定義して、マップ、マーカー、ポリラインの**座標**オブジェクトを保持することから始めましょう。こうすることで、PubNubのイベントに合わせて調整することができる。続いて、[Google Maps JavaScript 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);
```

最後に、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>
```

まとめ
---

このチュートリアルシリーズでは、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=ja)ウェブアプリやモバイルアプリでリアルタイムの位置情報をトラッキングするために非常にうまく連携する方法を紹介しました。これは**Uberや** **Lyftの**ようなライドヘイリングサービスがリアルタイムで車両の動きを表示するのと似ている。

PubNubを体験する
-----------

[ライブツアーを](https://www.pubnub.com/tour/introduction/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)チェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解してください。[GitHubページや](https://github.com/PubNubDevelopers)Webサイトで公開されている体験談から、ユーザーの体験を直接聞くことができます。

セットアップ
------

[PubNubアカウントに](https://admin.pubnub.com/#/login?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)サインアップすると、PubNubキーに無料ですぐにアクセスできます。

始める
---

[PubNubのドキュメントは](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=ja)、ユースケースに関係なく、あなたを立ち上げ、実行することができます。私たちは、JavaScriptのGoogle Maps APIと私たちのSDKでリアルタイムトラッキングとそれらを使用する方法に特化したセクションがあります。