🗺️

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

2021/09/18に公開

JavaScript

@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()`

環境

マップの初期化：create()

オプション

サンプルコード

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

サンプルコード

マーカーの追加：addMarker()

オプション

サンプルコード

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

オプション

サンプルコード

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

オプション

サンプルコード

-：initialize()

オプション

-：setCamera()

オプション

-：setIndoorEnabled()

オプション

-：setTrafficEnabled()

オプション

-：accessibilityElementsHidden()

オプション

-：padding()

オプション

-：clear()

-：hide()

-：show()

-：reverseGeocodeCoordinate()

-：enableCurrentLocation()

-：myLocation()

-：setMapStyle()

-：addPolyline()

オプション

-：addCircle()

オプション

-：addPolygon()

オプション

-：setOnMarkerClickListener()

-：setOnMapClickListener()

-：setOnPoiClickListener()

-：requestLocationPermission()

-：setOnMyLocationClickListener()

-：setOnMyLocationButtonClickListener()

Discussion

マップの初期化：`create()`

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

マーカーの追加：`addMarker()`

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

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

-：`initialize()`

-：`setCamera()`

-：`setIndoorEnabled()`

-：`setTrafficEnabled()`

-：`accessibilityElementsHidden()`

-：`padding()`

-：`clear()`

-：`hide()`

-：`show()`

-：`reverseGeocodeCoordinate()`

-：`enableCurrentLocation()`

-：`myLocation()`

-：`setMapStyle()`

-：`addPolyline()`

-：`addCircle()`

-：`addPolygon()`

-：`setOnMarkerClickListener()`

-：`setOnMapClickListener()`

-：`setOnPoiClickListener()`

-：`requestLocationPermission()`

-：`setOnMyLocationClickListener()`

-：`setOnMyLocationButtonClickListener()`