皆様、こんにちは!
Google Maps Platform のプロフェッショナル集団、ゴーガです。
本日は Google Maps Platform から、ベクターマップについてご紹介します。
Google Maps Platform ではラスターマップ(Raster Map)とベクターマップ(Vector Map)の2種類が使用できます。
デフォルトではラスターマップが使われていますが、ベクターマップにはラスターマップにはない様々な特徴がありますので、
ぜひこの記事を読んでベクターマップの理解を深めていただけると嬉しく思います。
ベクターマップとラスターマップの比較
はじめに、ベクターマップとラスターマップで表示されるマップを確認してみます。
一見、見た目は変わらないですが、マップをズームすると..
ベクターマップでは3Dの東京タワーが表示されていることが確認できます。
このように、ベクターマップでは一定以上のズームレベルで3Dの建物を表示できます。
ベクターマップでできること
ベクターマップはマップを傾けたり、回転したりすることができます。
こちらの動画も合わせてご覧ください。
なぜ、ベクターマップは傾斜や回転ができるのか
ラスターマップとベクターマップの違いにあります。
ラスターマップ:
マップの画像を受け取って表示している
画像なので、決まったマップしか表示できない
ベクターマップ:
地図の元データそのものを受け取って、組み立ててから表示している
表示するときに、ユーザーの操作(どのマップどう表示するか指定)で組み立てているので、
傾斜や回転のマップが表示できる
ベクターマップの使用方法
ベクターマップを実際に使用するための方法をご紹介します。
Google Maps Platform でベクターマップを使用するためには、マップ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 って何?」や「ベクターマップを活用した実装について相談したい!」など、気になることがありましたらお気軽にご相談ください!
それでは、また次の記事でお会いしましょう!
▼お問い合わせはこちら
▼ブログトップページ