Error: "CapacitorGoogleMaps.createMap()" is not implemented on android.
focafull opened this issue · comments
Describe the bug
I try to get the map working on android but when ever I try to load it I get
Error: "CapacitorGoogleMaps.initialize()" is not implemented on android.
To Reproduce
I use Ionic with Vue3, here is my component.
<template>
<div id="map" />
</template>
<script lang="ts">
import {modalController} from '@ionic/vue';
import {defineComponent} from 'vue';
import {useStore} from '../../store';
import {CapacitorGoogleMaps} from '@capacitor-community/google-maps';
export default defineComponent({
components: {
},
data() {
return {
store: useStore(),
};
},
mounted() {
this.createMap();
},
methods: {
async createMap() {
// first of all, you should initialize the Maps SDK:
await CapacitorGoogleMaps.initialize({
key: 'xxx',
devicePixelRatio: window.devicePixelRatio, // this line is very important
});
const mapRef = document.getElementById('map');
if (!mapRef) {
alert('error');
return;
}
const boundingRect = mapRef.getBoundingClientRect();
// we can now create the map using the boundaries of #container
try {
const result = await CapacitorGoogleMaps.createMap({
cameraPosition: {
target: {
latitude: this.$store.state.geoPosition.location.lat,
longitude: this.$store.state.geoPosition.location.lon,
},
zoom: 12,
},
boundingRect: {
width: Math.round(boundingRect.width),
height: Math.round(boundingRect.height),
x: Math.round(boundingRect.x),
y: Math.round(boundingRect.y),
},
});
mapRef.style.background = 'transparent';
mapRef.setAttribute('data-maps-id', result.googleMap.mapId);
alert('Map loaded successfully');
} catch (e) {
alert('Map failed to load');
}
},
},
});
</script>
<style>
#map {
width: 100vw;
height: 100vh;
background: #000;
}
ion-content {
--background: transparent;
}
</style>
Is there something I'm doing obviously wrong?
Thanks for any help.
I don't see any obvious mistake here. My first guess would be that the package is wrongly installed or something. Make sure you've followed all the steps from the docs one by one. It's also wise to take a look at the troubleshooting guide by Capacitor themselves: https://capacitorjs.com/docs/android/troubleshooting
Try delete @capacitor/google-maps
Closing because this issue went stale.