このチュートリアルを始める前に、PubNubアカウントにサインアップしてAPIキーを取得してください。PubNubでは、拡張するときまで費用がかからないサンドボックス層を提供しています！

ジオロケーションとトラッキング機能は継続的に進歩しています。私たちは静的な地図を越えて、インタラクティブでダイナミックなAPIマッピングテクノロジーの領域へと移行しました。このシフトは、オンデマンド経済からモノのインターネットまで、あらゆる産業においてジオロケーションAPIが不可欠な役割を担っていることを強調している。

リアルタイムのトラッキングは、確かに広い網を投げかけていますね。

Google Mapsトラッキングチュートリアル概要

このチュートリアルは、Google Maps JavaScript APIとPubNubを使って、ウェブとモバイル用のリアルタイムマップを構築するための4つのパートからなるチュートリアルです。まずはアプリをセットアップするための基本的なことから始め、その後のパートでリアルタイムのジオロケーション機能を追加していきます。

最後には、JavaScriptのGoogle Maps APIとPubNubを利用して、マップマーカー、デバイスの位置追跡、飛行経路を備えた基本的なJavaScript位置追跡アプリが完成します。

リアルタイム位置情報APIのセットアップ

チュートリアルアセット

このチュートリアルでは、デスクトップまたはモバイルデバイス上の最近の常用ブラウザで作業することを前提としています。

PubNubのセットアップ

始めるには、まずPubNubの公開キーと購読キーが必要です。アカウントをお持ちでない場合は、こちらからサインアップできます。Pub/Subキーは管理者ダッシュボードで利用できます。キーはUUIDに似ており、それぞれ "pub-c-"と "sub-c-"のプレフィックスで始まります。

pub/subキーを取得したら、Androidアプリケーション（および同じチャネルを使用して通信する他のシステム）を表す新しいPubNubアプリケーションを作成します。PubNubアプリケーションには、アプリケーションがこれらの指定された機能に使用できるパブリッシュキーとサブスクライブキーが含まれます。

Google Maps APIのセットアップ

Google Mapsと統合するには、Google Maps APIキーを作成する必要があります。こちらのスタートガイドを参考に作成することをお勧めする。これで一意のAPIキーが作成され、好きなウェブアプリにロックダウンできるようになります。たくさんのプロジェクトを作成し始めたら、Google APIコンソールで認証情報を管理できる。

API キーを作成したら、Google Cloud コンソールで「Maps JavaScript API」を有効にすることを忘れないでください。

リアルタイム位置情報APIの概要

このHTML5とJavaScriptのサンプルアプリケーションでは、PubNubがリアルタイム通信機能を提供し、リモートオブジェクトの位置（緯度と経度）が変化すると、Webアプリケーションが受信イベントを受け取ることができます。

使用するPubNubのコア機能はリアルタイムメッセージングです。私たちのアプリケーションは、PubNubチャネルを使用して、位置が変更されたイベントを送受信します。この例では、同じアプリケーションが位置イベントの送信と受信の両方を行います。あなたのアプリケーションでは、パブリッシャー（送信者）システムとサブスクライバー（受信者）システムは異なるかもしれません。

グーグルマップの概要

このチュートリアルでは、JavaScriptのGoogle Maps APIと HTML5の地図ウィジェットを使用します。HTML5地図ウィジェットは、設定した周辺の地図を表示します。地図の大きさ、地図の中心の緯度経度、ズームレベル、地図のスタイル、その他のオプションは、初期の好みに合わせて設定し、その場で更新することができます。

Google Maps JavaScript APIには初期化コールバックオプションがあり、マップの読み込み時に指定した関数を呼び出します。さらに、マップマーカーやポリラインのような機能を使うことで、指定した場所にフレンドリーなマップマーカーや飛行経路をマップ上に配置することができます（パート2、3、4）。すべてのポイントはユーザーが指定し、更新が到着するとリアルタイムで更新される可能性があります。

コードチュートリアル

コードを扱うには、CodePenを使って自分のプロジェクトにフォークするか、HTMLコードをファイルにダウンロードし、お気に入りのHTTPサーバーを使って実行します。このようにCodePenウェブIDEでコードを編集することをお勧めします：

一度IDEに入れば、アプリを素早く実行するための細かいコード変更を行うことができます。

アプリケーションのセットアップと設定

ウェブページの構成は、過去にウェブアプリケーションを扱ったことがある人ならなじみがあるはずです。まずは地図表示用のDIVタグを持つプレーンなHTML5 + JavaScriptアプリケーションから始めます。HTMLページのHEADにリアルタイム通信用のPubNubライブラリをインクルードします。

また、HTMLページの一番下にあるSCRIPTタグを使ってGoogle Maps APIをインクルードします。最新版についてはGoogle Mapsの公式ドキュメントを確認してください。

SCRIPT SRC属性のプレースホルダのマップAPIキーとバージョンは上記のように置き換える必要があることに注意してください。

HTML5の位置情報が機能するためには、ユーザーが明示的にアプリへの位置情報アクセスを許可する必要があります。位置情報の許可が拒否された場合のグレースフル・フォールバックの処理は、このチュートリアルの範囲外です。しかし、最高のユーザーエクスペリエンスを提供するためには、最終的なアプリケーションでこれらのケースを確実に処理することが不可欠です。

PubNubの設定はシンプルなJavaScriptマップ内に含まれています。以下のように独自の値で更新することができます：

pubnub = new PubNub({
    publishKey : "myPublishKey",
    subscribeKey : "mySubscribeKey",
    userId: "myUniqueUserId"
});

コードの実行

CodePenでアプリを実行するために特別なことをする必要はありません - オンラインエディタから自動的に実行されます。アプリを表示している場所（ジオロケーション）や接続の機能（WiFiかLTEか）によって、報告される位置が異なる場合があります（IPからジオ、GPSからジオ）。私たちは、異なるデバイスや異なるブラウザは、独自の位置精度の特性を持っていることを発見しました。

次のステップ

これでアプリのセットアップは完了です。後編では、ライブ・マップ・マーカーを実装します。ライブ・マップ・マーカーとは、デバイスが地図上のどの位置にあるかを特定するものです。

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

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

PubNubのプラットフォームは、開発者がウェブアプリ、モバイルアプリ、IoTデバイス向けにリアルタイムのインタラクティブ機能を構築、提供、管理できるように支援します。

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

PubNubを体験

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

セットアップ

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

始める

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

Modern MapsによるリアルタイムGeolocation API JavaScript