🗺️

【Vue3】@capacitor-community/capacitor-googlemaps-native まとめ

12 min read

@capacitor-community/capacitor-googlemaps-nativeをVue3で利用する際の手順と各種説明です。

このライブラリはエミュレータもしくは実機でのみ確認できます。

現段階で未検証(実装されていない機能など)は説明を記載していません。

環境

項目名 バージョン
vue ^3.0.0
@capacitor/core ^3.2.2
@capacitor/android ^3.2.2
@capacitor/ios ^3.2.2
@capacitor-community/capacitor-googlemaps-native 1.1.0

マップの初期化:create()

GoogleMapを表示するにはcreateメソッドを利用します。

オプション

プロパティ 必須 説明
width number 表示するGoogleMapの横幅
height number 表示するGoogleMapの高さ
x number 表示するGoogleMapのX座標(左)
y number 表示するGoogleMapのY座標(上)
latitude number | undefined × マップの中心(緯度)
longitude number | undefined × マップの中心(経度)
zoom number | undefined × 初期ズームレベル
liteMode boolean | undefined × ライトモード(Androidのみ)

サンプルコード

<template>
  <div id="map" ref="mapRef"></div>
</template>

<script lang="ts">
// vue
import { defineComponent, computed, ref, onMounted } from 'vue';

// capacitor
import { CapacitorGoogleMaps } from '@capacitor-community/capacitor-googlemaps-native';

export default defineComponent({
  setup() {
    const mapRef = ref();

    onMounted(() => {
      // GoogleMapを埋め込むDOMの情報を取得
      const ref = mapRef.value as HTMLElement;
      const width = ref.clientWidth;
      const height = ref.clientHeight;
      const coords = ref.getBoundingClientRect();

      // GoogleMapを生成
      CapacitorGoogleMaps.create({
        width,
        height,
        x: coords.x,
        y: coords.y,
        latitude: curPos.value.lat,
        longitude: curPos.value.lng,
        zoom: 12,
      });

    return {
      mapRef,
    };
  },
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>

マップの準備完了を検知:onMapReady

GoogleMapの準備完了を検知するにはCapacitorGoogleMaps.addListener('onMapReady', () => {})メソッドを利用します。
準備完了を検知して、この後解説するマーカーの追加などを行います。

サンプルコード

<template>
  <div id="map" ref="mapRef"></div>
</template>

<script lang="ts">
// vue
import { defineComponent, computed, ref, onMounted } from 'vue';

// capacitor
import { CapacitorGoogleMaps } from '@capacitor-community/capacitor-googlemaps-native';

export default defineComponent({
  setup() {
    const mapRef = ref();

    onMounted(() => {
      // GoogleMapを埋め込むDOMの情報を取得
      const ref = mapRef.value as HTMLElement;
      const width = ref.clientWidth;
      const height = ref.clientHeight;
      const coords = ref.getBoundingClientRect();

      // GoogleMapを生成
      CapacitorGoogleMaps.create({
        width,
        height,
        x: coords.x,
        y: coords.y,
        latitude: curPos.value.lat,
        longitude: curPos.value.lng,
        zoom: 12,
      });
      
      CapacitorGoogleMaps.addListener('onMapReady', async () => {
        // ここでマーカーの追加などを行う
      });

    return {
      mapRef,
    };
  },
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>

マーカーの追加:addMarker()

マーカーを表示するにはaddMarkerメソッドを利用します。

オプション

プロパティ 必須 説明
latitude number マーカーを表示する座標(緯度)
longitude number マーカーを表示する座標(経度)
opacity number | undefined × マーカーの透明度(0~1)
title number × マーカーをクリックした際に表示されるタイトル
snippet string | undefined × マーカーをクリックした際にタイトルの下に表示される追加のテキスト
isFlat boolean | undefined × デフォルトでは、マーカーは画面の向きに合わせて表示され、カメラの動きに合わせて回転または傾斜することはありません。一方、フラット マーカーは地面の向きに合わせて表示され、カメラの動きに合わせて回転または傾斜します。どちらのタイプのマーカーも、ズームによってサイズが変わることはありません。この効果が必要な場合は、GroundOverlays を使用してください。
url string | undefined × マーカーとして表示したい画像のURL

サンプルコード

<template>
  <div id="map" ref="mapRef"></div>
</template>

<script lang="ts">
// vue
import { defineComponent, computed, ref, onMounted } from 'vue';

// capacitor
import { CapacitorGoogleMaps } from '@capacitor-community/capacitor-googlemaps-native';

export default defineComponent({
  setup() {
    const mapRef = ref();

    onMounted(() => {
      // GoogleMapを埋め込むDOMの情報を取得
      const ref = mapRef.value as HTMLElement;
      const width = ref.clientWidth;
      const height = ref.clientHeight;
      const coords = ref.getBoundingClientRect();

      // GoogleMapを生成
      CapacitorGoogleMaps.create({
        width,
        height,
        x: coords.x,
        y: coords.y,
        latitude: curPos.value.lat,
        longitude: curPos.value.lng,
        zoom: 12,
      });
      
      CapacitorGoogleMaps.addListener('onMapReady', async () => {
        CapacitorGoogleMaps.addMarker({
          latitude: 35.689633,
          longitude: 139.692101,
          title: 'マーカーのタイトル',
          snippet: 'マーカーの説明文',
        });
      });

    return {
      mapRef,
    };
  },
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>

地図タイプの設定:setMapType()

地図タイプを変更するにはsetMapTypeメソッドを利用します。

オプション

プロパティ 必須 説明
type string マップタイプ

記事執筆時点ではマップタイプにnormal, hybrid, terrain, satelliteが指定可能ですが、今後はnormalのみになるそうです。
最新情報は下記公式ドキュメントをご覧ください。
https://developers.google.com/maps/documentation/android-sdk/configure-map?hl=ja#maptype

サンプルコード

<template>
  <div id="map" ref="mapRef"></div>
</template>

<script lang="ts">
// vue
import { defineComponent, computed, ref, onMounted } from 'vue';

// capacitor
import { CapacitorGoogleMaps } from '@capacitor-community/capacitor-googlemaps-native';

export default defineComponent({
  setup() {
    const mapRef = ref();

    onMounted(() => {
      // GoogleMapを埋め込むDOMの情報を取得
      const ref = mapRef.value as HTMLElement;
      const width = ref.clientWidth;
      const height = ref.clientHeight;
      const coords = ref.getBoundingClientRect();

      // GoogleMapを生成
      CapacitorGoogleMaps.create({
        width,
        height,
        x: coords.x,
        y: coords.y,
        latitude: curPos.value.lat,
        longitude: curPos.value.lng,
        zoom: 12,
      });
      
      CapacitorGoogleMaps.addListener('onMapReady', async () => {
        CapacitorGoogleMaps.addMarker({
          latitude: 35.689633,
          longitude: 139.692101,
          title: 'マーカーのタイトル',
          snippet: 'マーカーの説明文',
        });
	
	CapacitorGoogleMaps.setMapType({
          type: 'normal',
        });
      });

    return {
      mapRef,
    };
  },
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>

地図コントロールの追加:settings()

地図タイプを変更するにはsetMapTypeメソッドを利用します。

オプション

プロパティ 必須 説明
allowScrollGesturesDuringRotateOrZoom boolean | undefined × -
compassButton boolean | undefined × -
consumesGesturesInView boolean | undefined × -
indoorPicker boolean | undefined × -
myLocationButton boolean | undefined × -
rotateGestures boolean | undefined × -
scrollGestures boolean | undefined × -
tiltGestures boolean | undefined × -
zoomGestures boolean | undefined × マップの拡縮小ボタンの表示/非表示

サンプルコード

<template>
  <div id="map" ref="mapRef"></div>
</template>

<script lang="ts">
// vue
import { defineComponent, computed, ref, onMounted } from 'vue';

// capacitor
import { CapacitorGoogleMaps } from '@capacitor-community/capacitor-googlemaps-native';

export default defineComponent({
  setup() {
    const mapRef = ref();

    onMounted(() => {
      // GoogleMapを埋め込むDOMの情報を取得
      const ref = mapRef.value as HTMLElement;
      const width = ref.clientWidth;
      const height = ref.clientHeight;
      const coords = ref.getBoundingClientRect();

      // GoogleMapを生成
      CapacitorGoogleMaps.create({
        width,
        height,
        x: coords.x,
        y: coords.y,
        latitude: curPos.value.lat,
        longitude: curPos.value.lng,
        zoom: 12,
      });
      
      CapacitorGoogleMaps.addListener('onMapReady', async () => {
        CapacitorGoogleMaps.addMarker({
          latitude: 35.689633,
          longitude: 139.692101,
          title: 'マーカーのタイトル',
          snippet: 'マーカーの説明文',
        });
	
	CapacitorGoogleMaps.setMapType({
          type: 'normal',
        });
	
	CapacitorGoogleMaps.settings({
          zoomGestures: true,
        });
      });

    return {
      mapRef,
    };
  },
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>

適宜更新予定

LatLng型
LatLng {
  latitude: number;
  longitude: number;
}
ViewID型
ViewID {
  androidID?: number;
  iOSID?: number;
}

-:initialize()

オプション

プロパティ 必須 説明
key string -

-:setCamera()

オプション

プロパティ 必須 説明
viewingAngle number × -
bearing `number × -
zoom number × -
latitude string × -
longitude string × -
animate boolean × -
animationDuration number × -
coordinates LatLng[] × -

-:setIndoorEnabled()

オプション

プロパティ 必須 説明
enabled boolean -

-:setTrafficEnabled()

オプション

プロパティ 必須 説明
enabled boolean -

-:accessibilityElementsHidden()

オプション

プロパティ 必須 説明
hidden boolean -

-:padding()

オプション

プロパティ 必須 説明
top number -
left number -
rigth number -
bottom number -

-:clear()

-:hide()

-:show()

-:reverseGeocodeCoordinate()

-:enableCurrentLocation()

-:myLocation()

-:setMapStyle()

-:addPolyline()

オプション

プロパティ 必須 説明
id ViewID × -
points LatLng[] × -
tag any × -
color string × -
width number × -
zIndex number × -
visibility boolean × -

-:addCircle()

オプション

プロパティ 必須 説明
id ViewID × -
center LatLng -
radius number -
strokeColor string × -
fillColor string × -
strokeWidth number × -
zIndex number × -
visibility boolean × -

-:addPolygon()

オプション

プロパティ 必須 説明
id ViewID × -
points LatLng[] -
tag any -
strokeColor string × -
fillColor string × -
strokeWidth number × -
zIndex number × -
visibility boolean × -

-:setOnMarkerClickListener()

-:setOnMapClickListener()

-:setOnPoiClickListener()

-:requestLocationPermission()

-:setOnMyLocationClickListener()

-:setOnMyLocationButtonClickListener()

Discussion

ログインするとコメントできます