🗺️

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

に公開
JavaScript
Vue.js
Capacitor
Vue 3
Google Map
tech

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

環境

項目名 バージョン
vue ^3.2.0
@capacitor/core ^3.4.1
@capacitor/android ^3.4.1
@capacitor/ios ^3.4.1
@capacitor-community/capacitor-googlemaps-native 1.2.0

マップの初期化：create()

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

オプション

プロパティ 型 必須 説明
width number ○ 表示するGoogleMapの横幅
height number ○ 表示するGoogleMapの高さ
x number ○ 表示するGoogleMapのX座標（左）
y number ○ 表示するGoogleMapのY座標（上）
latitude number or undefined × マップの中心（緯度）
longitude number or undefined × マップの中心(経度）
zoom number or undefined × 初期ズームレベル
liteMode boolean or 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 or undefined × マーカーの透明度（0~1）
title number × マーカーをクリックした際に表示されるタイトル
snippet string or undefined × マーカーをクリックした際にタイトルの下に表示される追加のテキスト
isFlat boolean or undefined × デフォルトでは、マーカーは画面の向きに合わせて表示され、カメラの動きに合わせて回転または傾斜することはありません。一方、フラット マーカーは地面の向きに合わせて表示され、カメラの動きに合わせて回転または傾斜します。どちらのタイプのマーカーも、ズームによってサイズが変わることはありません。この効果が必要な場合は、GroundOverlays を使用してください。
iconUrl string or undefined × マーカーとして表示したい画像のURL
draggable boolean or 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: 'マーカーの説明文',
        });
      });

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

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

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

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

オプション

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

サンプルコード

<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 or undefined × -
compassButton boolean or undefined × -
consumesGesturesInView boolean or undefined × -
indoorPicker boolean or undefined × -
myLocationButton boolean or undefined × -
rotateGestures boolean or undefined × -
scrollGestures boolean or undefined × -
tiltGestures boolean or undefined × -
zoomGestures boolean or 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