Google MapsプラットフォームとPubNubを使ってリアルタイムマップとデバイスを追跡するジオロケーションAPIを構築する4回シリーズの第3回です。

ジオロケーショントラッキングとは？

この初心者向けチュートリアルでは、パート2で作成したGoogle Maps JavaScript APIマップマーカーをライブジオロケーション機能でライブアップデートするアプリを作成します。HTML5のジオロケーションAPIを使用して、ユーザーの位置情報をデバイスから収集し、PubNubリアルタイムメッセージング -リアルタイムの位置情報トラッキング- を使用して、位置情報の変更（デバイスが自己申告した位置情報に基づいて）をストリーミングしてマップに公開します！

チュートリアル概要

このサンプルのコードはCodePenにあります。

デモを有効にするには、Google Cloud Platformから自分のAPIキーを指定する必要があることに注意してください。

まだの方は、まず第1部と第2部で、JavaScript環境のセットアップとマップ・マーカーの使い方を説明した前提条件をいくつかクリアしてください。

さて、関連するすべてのコンフィギュレーション設定が完了し、マップマーカーが手に入ったので、ウェブまたはモバイルウェブマップ用の位置情報の収集と公開を始めましょう。

コードのチュートリアル

アプリケーション用のDIVと、マップを保持するDIVは前回のチュートリアルで設定済みです。それではいよいよ、HTML5の位置情報APIを使ってリアルタイムに位置情報を更新していきましょう。

HTML5 Location API

一歩ずつ進めていこう。まず、サンフランシスコ近辺の緯度と経度を設定します。次に、HTML5 Location APIを使ってデバイスの位置情報を取得し、ブラウザの位置情報変数を更新する関数を作成します。定期的にデバイスの位置を取得するために、インターバル・タイマーを設定する。便宜上、これらの値を緯度と経度として含むJavaScriptオブジェクトを返します。

次のJavaScriptコード・スニペットは、ユーザーの現在位置を取得する方法を示している：

<script>
window.lat = 37.7850;
window.lng = -122.4383;
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(updatePosition);
    }
    return null;
};
function updatePosition(position) {
  if (position) {
    window.lat = position.coords.latitude;
    window.lng = position.coords.longitude;
  }
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
  return {lat:window.lat, lng:window.lng};
};

さて、HTML5の位置情報についての説明はここまでにして、本題に入りましょう。

ライブ位置情報

マップオブジェクトとマーカーオブジェクトを保持するためにmap変数とmark変数を定義し、PubNubイベントが入ってきたときにその場で操作できるようにします。次に、Google Maps JavaScript APIが読み込む準備ができたときに呼び出すinitializeコールバックを定義し、APIからアクセスできるようにwindowオブジェクトのメンバであることを確認します。

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;

次に再描画イベントハンドラを定義し、新しい位置変更イベントが発生したときに呼び出します。関数の最初の部分では、緯度と経度をメッセージからの新しい値にセットする。それから、マップとマーカーオブジェクトの適切なメソッドを呼び出して、位置を更新し、マップを再配置します。

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のリアルタイム・データ・ストリーミング機能の初期化に移ることができる。まず最初に、新しい位置の更新が届くチャンネル名を決める。次に、前提条件のステップ1で設定したpublishキーとsubscribeキーを使用してPubNubライブラリを初期化します。

最後に、PubNubライブラリに適切なチャンネルをサブスクライブするように指示し、受信イベントのリスナーとしてredraw関数をアタッチします。これらのイベントは何によって生成されるのでしょうか？お楽しみに！

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

緯度/経度のパブリッシング

このシンプルなチュートリアルでは、基本的なJavaScriptのインターバル・タイマーをセットアップして、現在時刻に基づいて新しい位置をパブリッシュします。5000ミリ秒ごとに匿名コールバック関数を呼び出し、新しい緯度経度オブジェクト（currentLocation()コールで作成）を指定されたPubNubチャンネルに発行します。

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 5000);
</script>

最後に、Google Maps APIを初期化し、DOM要素とJavaScriptの前提条件が満たされていることを確認します。

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

次のステップ

ここまでで75%は完了したので、次はパート4の最後の機能であるフライトパスを追加する番だ！フライトパスは、マップマーカーの後ろに軌跡を描くことで、デバイスがどのようなルートを通ったかを示します。

PubNubはあなたのお役に立ちますか？

この記事はPubNub.comに掲載されたものです。

PubNubのプラットフォームは、開発者がWebアプリ、モバイルアプリ、IoTデバイスのためのリアルタイムのインタラクティブ性を構築、配信、管理するのに役立ちます。

私たちのプラットフォームの基盤は、業界最大かつ最もスケーラブルなリアルタイムエッジメッセージングネットワークです。世界15か所以上で8億人の月間アクティブユーザーをサポートし、99.999%の信頼性を誇るため、停電や同時実行数の制限、トラフィックの急増による遅延の問題を心配する必要はありません。

PubNubを体験

ライブツアーをチェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解する

セットアップ

PubNubアカウントにサインアップすると、PubNubキーに無料ですぐにアクセスできます。

始める

PubNubのドキュメントは、ユースケースやSDKに関係なく、あなたを立ち上げ、実行することができます。

Blog

Google Maps APIによるジオロケーション・トラッキング

PubNub Developer Relations