Maps no longer visible after first apk created

[WynOwen72]

So I've written my Vue\Capacitor\Ionic app using this plugin. I got everything working using the Android Studio emulators, then graduated on my Android phone with the app being installed via USB. Everything worked. Screenshot from the emulator:

Yesterday I compiled the first APK. I then used this APK to install the app on my phone. The homescreen via the APK and in the emulator is now blank:

As you can see the google logo is in the bottom left corner and the controls are in the bottom right corner so the whole plugin semi works. I've tried uninstalling the plugin and reinstalling it. I have created a new API key and updated the AndoidManifest.xml. There are no restrictions on the API key. Still the blank map. To check if it's the app or the environment on my PC I created a new Vue3 project and used the Vue example:

<template>
    <div class="container col">
      <div ref="exampleMap" class="flex-grow" style="background: purple"></div>

      <div class="row gap-4">
        <CButton v-if="!exampleMapId" @click="startMap"> CreateMap </CButton>
        <CButton @click="addMarker"> AddMarker </CButton>
        <CButton @click="moveCamera"> MoveCamera </CButton>
      </div>
    /div>
  </template>

  <script setup lang="ts">
  import { CapacitorGoogleMaps } from '@capacitor-community/google-maps';
  import { ref, onMounted } from 'vue';

  import CButton from './CButton.vue';

  const exampleMapId = ref<string | null>(null);
  const exampleMap = ref<InstanceType<typeof HTMLElement> | null>(null);

  const getRandomArbitrary = (min: number, max: number) => {
    return Math.random() * (max - min) + min;
  };

  const startMap = async () => {
    // if map already (being) initialized, avoid a new map being initialized
    if (exampleMapId.value != null) {
      return;
    }

    // find element where element should be attached to
    const element = exampleMap.value;
    if (!element) {
      return;
    }

    // prevent race condition, where firing `startMap` quickly after one another, starts up multiple maps
    exampleMapId.value = '';

    // remove background, so map can be seen
    element.style.background = '';

    // get boundaries of element
    const boundingRect = element.getBoundingClientRect();

    // finally create the map
    try {
      const result = await CapacitorGoogleMaps.createMap({
        boundingRect: {
          width: Math.round(boundingRect.width),
          height: Math.round(boundingRect.height),
          x: Math.round(boundingRect.x),
          y: Math.round(boundingRect.y),
        },
        cameraPosition: {
          target: {
            latitude: -33.86,
            longitude: 151.2,
          },
          zoom: 12,
        },
        preferences: {
          appearance: {
            isTrafficShown: true,
          },
        },
      });

      // remember mapId for curent element for later use
      exampleMapId.value = result.googleMap.mapId;

      // set `data-maps-id` attribute for delegating touch events
      element.setAttribute('data-maps-id', exampleMapId.value);

      // remove background, so map can be seen
      element.style.background = '';

      alert('map created: ' + JSON.stringify(result, null, 1));

      // since we now know the mapId, we can start listening to events

      CapacitorGoogleMaps.didTapMarker(
        {
          mapId: exampleMapId.value,
        },
        () => {
          // this will never fire, because it is overwritten by the next `didTapMarker` listener
          alert('this will never be shown');
        }
      );

      CapacitorGoogleMaps.didTapMarker(
        {
          mapId: exampleMapId.value,
          preventDefault: true, // set to true if you do not want the default behaviour
        },
        (result) => {
          // but this will fire
          alert('didTapMarker: ' + JSON.stringify(result, null, 1));
        }
      );

      CapacitorGoogleMaps.didEndMovingCamera(
        {
          mapId: exampleMapId.value,
        },
        (result) => {
          const latitude = result.cameraPosition.target?.latitude;
          const longitude = result.cameraPosition.target?.longitude;
        }
      );
    } catch (e) {
      console.error(e);
      exampleMapId.value = null;
    }
  };

  const addMarker = async () => {
    if (!exampleMapId.value) {
      return;
    }

    const result = await CapacitorGoogleMaps.addMarker({
      mapId: exampleMapId.value,
      position: {
        latitude: -getRandomArbitrary(33, 34),
        longitude: getRandomArbitrary(151, 152),
      },
      preferences: {
        title: 'Some title',
        snippet: 'Some snippet',
        metadata: {
          some: 'data',
        },
      },
    });

    alert('marker created: ' + JSON.stringify(result, null, 1));
  };

  const moveCamera = async () => {
    if (!exampleMapId.value) {
      return;
    }

    await CapacitorGoogleMaps.moveCamera({
      mapId: exampleMapId.value,
      cameraPosition: {
        target: {
          latitude: -33.86,
          longitude: 151.2,
        },
        zoom: 0,
      },
      duration: 1000,
    });
  };

  onMounted(async () => {
    // initialize map
    await CapacitorGoogleMaps.initialize({
      key: 'AIzaSyA5xxxxxxxxxxxxxxxxxxxxxxx',
      devicePixelRatio: window.devicePixelRatio,
    });
  });
  </script>

This also results in the blank screen:

To me this means it's an environment issue. But what could cause this?

TIA

[tafelnl]

I think Google had either an outage 13-14 June, or they're currently decommissioning the v3-beta version of the Android Google Maps SDK.

iOS and web were doing fine. But Android suffered issues. Right now it works for me again. I will keep an eye out..

I didn't want to upgrade the v3-beta version to the latest, because - according to my tests (which were quite extensive) at least - v3-beta is performing way better (when having many markers on the map) than the latest version. (https://issuetracker.google.com/issues/69114412)

[WynOwen72]

Hi Tafelnl,

Thanks for the update. What you describe fits as everything is working this morning again.