JavaScriptのGoogle Maps APIとPubNubを使って、ウェブやモバイルウェブ向けに位置情報をトラッキングしたリアルタイムマップを構築する4つのパートからなるシリーズのパート2です。

マップマーカーとは？

このチュートリアルでは、ウェブやモバイルウェブのマップにマップマーカーを追加します。マップマーカーはマップ上でユーザーやデバイスの位置を特定するために使用されます。この機能を始めるにあたり、マップ上に1つのマップマーカーを配置し、その位置をランダムに更新します。次のパートでは、実際のデバイスの位置に基づいてマップマーカーを移動させます。

チュートリアルの概要

まだの方は、まずパート1で説明したいくつかの前提条件をクリアする必要があります。これらには以下が含まれます：

PublishキーとSubscribeキーを含むPubNubアプリケーションの作成
Google Maps APIプロジェクトと認証情報の作成

この例のコードはCodepenとしてここにあります。

コードチュートリアル

このコード構造は、過去にHTML5アプリケーションを扱ったことがある人ならなじみがあるはずです。プレーンなHTML5アプリケーションから始めて、リアルタイム通信のためのPubNubライブラリと最小限のスタイリングのためのBootstrap CSSを含めます。

<!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を使っている。実際のプロダクションクラスのアプリケーションでは、このスタイルを別の場所で定義することになるでしょう。これは、Map canvas DOM 要素を定義した後で Google Maps スクリプトをインクルードしたいと述べたときの話です。

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

さて、たくさんの JavaScript を処理しなければなりません。一歩ずつ進めていきましょう。

緯度／経度

まず、サンフランシスコ近辺の緯度と経度を初期設定する。次に、現在時刻に基づいた円上の点を与える関数を定義する。半径（緯度経度）を定義する。時間（エポック秒）を入力する。

三角法のマジックにより、円上の点はx = "初期経度プラス入力の余弦×半径"、y = "初期緯度プラス入力の正弦×半径 "で与えられる。便宜上、これらの値を緯度と経度として含むJavaScriptオブジェクトを返す。

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

地図マーカー位置の移動

さて、計算が終わったところで本題に入りましょう。マップとマーカーのオブジェクトを保持するためにmap変数とmark変数を定義する。そして、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に接続する

コールバックの定義が終わったので、PubNubのリアルタイムデータストリーミング機能の初期化に移ろう。まず最初に、新しい位置の更新が届くチャンネル名を決める。次に、前提条件のステップ1で設定したpublishキーとsubscribeキーを使用してPubNubライブラリを初期化します。

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

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

この簡単なチュートリアルでは、基本的なJavaScriptのインターバルタイマーを設定し、現在時刻に基づいて新しいポジションを公開します。500ミリ秒ごとに、指定されたPubNubチャンネルに新しい緯度経度オブジェクト（circlePoint()呼び出しによって作成される）を公開する匿名コールバック関数を呼び出します。

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

Google Mapsの初期化

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

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

次のステップ

これでJavaScript地図アプリケーションができ、地図マーカーをプロットできるようになりました。デバイスのののののののののののののののの生」(生年月月日から1700年8月1)

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

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

Our platform helps developers build, deliver, and manage real-time interactivity for web apps, mobile apps, and IoT devices.

The foundation of our platform is the industry's largest and most scalable real-time edge messaging network.世界15か所以上で8億人の月間アクティブユーザーをサポートし、99.999%の信頼性を誇るため、停電や同時実行数の制限、トラフィックの急増による遅延の問題を心配する必要はありません。

PubNubを体験

Check outLive Tourto understand the essential concepts behind every PubNub-powered app in less than 5 minutes

セットアップ

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

始める

することができますPubNubドキュメントを使用するケースやSDK関係なくすることができます起動する

Google Maps APIを使ったJavaScriptの位置情報トラッキング