ベクターマップ（Vector Map）のご紹介！

皆様、こんにちは！
Google Maps Platform のプロフェッショナル集団、ゴーガです。

本日は Google Maps Platform から、ベクターマップについてご紹介します。
Google Maps Platform ではラスターマップ（Raster Map）とベクターマップ（Vector Map）の2種類が使用できます。デフォルトではラスターマップが使われていますが、ベクターマップにはラスターマップにはない様々な特徴がありますので、ぜひこの記事を読んでベクターマップの理解を深めていただけると嬉しく思います。

ベクターマップとラスターマップの比較

一見、見た目は変わらないですが、マップをズームすると..

ベクターマップでは3Dの東京タワーが表示されていることが確認できます。このように、ベクターマップでは一定以上のズームレベルで3Dの建物を表示できます。

ベクターマップでできること

ベクターマップはマップを傾けたり、回転したりすることができます。

なぜ、ベクターマップは傾斜や回転ができるのか

ラスターマップとベクターマップの違いにあります。
ラスターマップ：
マップの画像を受け取って表示している
画像なので、決まったマップしか表示できない

ベクターマップ：
地図の元データそのものを受け取って、組み立ててから表示している
表示するときに、ユーザーの操作（どのマップどう表示するか指定）で組み立てているので、
傾斜や回転のマップが表示できる

ベクターマップの使用方法

ベクターマップを実際に使用するための方法をご紹介します。

Google Maps Platform でベクターマップを使用するためには、マップIDを取得することが必要です。
地図 ID を使用する

はじめに、Google Cloud の Google Maps Platform のメニューから、Map Management へ移動します。

「Create map ID」からマップIDの作成を開始します。

Map type を JavaScript に設定すると、Raster と Vector を指定するラジオボタンが表示されます。
ここで Vector を選択することで、ベクターマップを使用することができます。
また、Tilt と Rotation でそれぞれ傾斜・回転機能を利用するかどうかを選択できます。
これらの機能がマップを使用するアプリケーションに影響がある場合は無効にします。

設定を完了すると、マップIDが表示されます。
このマップIDを使用することで、ベクターマップを表示することができます。

最後に、マップ初期化の際に取得したマップIDを指定します。

const mapOptions = {
  center: { lat: 35.657, lng: 139.705 },
  zoom: 12,
  mapId: [ベクターマップを設定したMapIDを入力],
}
const map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)

ベクターマップを使用するうえで考えること

ベクターマップには、よりリッチなマップ表示ができたり、建物の3D表示ができたりと、様々なメリットがあります。これらの機能を上手く使うことでUXの向上が期待できます。しかし、ラスターマップと比べて少し動作が重いといったデメリットもあります。

ゴーガには Google Maps Platform に精通したエンジニアが多く在籍しています。「そもそも Google Maps Platform って何？」や「ベクターマップを活用した実装について相談したい！」など、気になることがありましたらお気軽にご相談ください！
それでは、また次の記事でお会いしましょう！