capacitor-community / google-maps

Capacitor Plugin using native Google Maps SDK for Android and iOS.
https://capacitor-community.github.io/google-maps/
MIT License
153 stars 64 forks source link

Error: "CapacitorGoogleMaps.createMap()" is not implemented on android. #168

Closed focafull closed 2 years ago

focafull commented 2 years ago

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.

tafelnl commented 2 years ago

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

She0n commented 2 years ago

Try delete @capacitor/google-maps

tafelnl commented 2 years ago

Closing because this issue went stale.