位置情報

Google Mirror API を使用すると、タイムライン アイテムでユーザーの位置情報を確認したり、最後に把握した位置情報を直接リクエストしたり、定期的な位置情報の更新を購読したりできます。Mirror API に描画する座標を指定することで、タイムライン カードに事前レンダリングされた地図画像を配信することもできます。

直近の位置情報を取得する

現在のユーザーの直近の位置情報を取得するには、REST エンドポイントに GET リクエストを送信します。

未加工の HTTP

GET /mirror/v1/locations/ HTTP/1.1
Authorization: Bearer {auth token}

位置情報の更新を登録する

タイムラインの更新を購読するのと同様に、locations コレクションを購読することで位置情報の更新を購読できます。

未加工の HTTP

POST /mirror/v1/subscriptions HTTP/1.1
Authorization: Bearer {auth token}
Content-Type: application/json
Content-Length: {length}

{
  "collection": "locations",
  "userToken": "harold_penguin",
  "verifyToken": "random_hash_to_verify_referer",
  "callbackUrl": "https://example.com/notify/callback"
}

タイムライン カードに地図を表示する

Google Mirror API を使用すると、地図をレンダリングし、マーカーや線を重ねて重要な場所や経路を示すことができます。glass://map URI を使用して地図をリクエストします。次の例をご覧ください。

<img src="glass://map?w=width&h=height&marker=0;latitude,longitude&marker=1;latitude,longitude&polyline=;latitude,longitude,latitude,longitude"
  width="width"
  height="height"/>

必須パラメータの説明は次のとおりです。

  • w - 返される地図画像の幅（ピクセル単位）
  • h - 返される地図画像の高さ（ピクセル単位）

次のリストの項目のうち 1 つのみが追加で必要ですが、すべてを指定することもできます。

  • center と zoom - レンダリングする地図の中心（緯度、経度）とズームレベル。詳しくは、ズームレベルをご覧ください。
  • marker - 指定された座標に描画するピン マーカーを指定します。マーカー パラメータは、マーカーの種類（0 は pin と 1、現在地を示します）、緯度座標、経度座標を受け取ります。center と zoom を明示的に指定しない場合、作成したマーカーを中心に地図が自動的に中央に配置され、ズームされます。
  • polyline - 地図上のパスを表すポリラインの座標を指定します。各ポリラインは、幅と色、ポリラインの頂点で構成されます。たとえば、polyline=8,ffff0000;47.6,-122.34,47.62,-122.40 は、(47.6,-122.34) と (47.62,-122.40) の間に 8 ピクセルの幅の赤い線を指定します。center と zoom を明示的に指定しない場合、地図は自動的に中央に配置され、ポリラインに合わせてズームされます。

次の例は、地図画像をテキストとともに表示するベスト プラクティスと、その表示例を示しています。

<article>
  <figure>
    <img src="glass://map?w=240&h=360&marker=0;42.369590,
      -71.107132&marker=1;42.36254,-71.08726&polyline=;42.36254,
      -71.08726,42.36297,-71.09364,42.36579,-71.09208,42.3697,
      -71.102,42.37105,-71.10104,42.37067,-71.1001,42.36561,
      -71.10406,42.36838,-71.10878,42.36968,-71.10703"
      height="360" width="240">
  </figure>
  <section>
    <div class="text-auto-size">
      <p class="yellow">12 minutes to home</p><p>Medium traffic on Broadway</p>
    </div>
  </section>
</article>

タイムライン カードに事前レンダリングされた地図