capacitor-community / google-maps

Capacitor Plugin using native Google Maps SDK for Android and iOS.

Home Page:https://capacitor-community.github.io/google-maps/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

commented

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

commented

Closing because this issue went stale.