Capacitor Google Maps and Geolocation: Using current position in config

Capacitor
1

I am trying to use the current position I get from the Geoposition API to center my map from the Google Maps API. Everything is working and I can hardcode a lat/lng and center the map. But using a value I assign does not work. I’ve isolated the problem to the updating of the const I define. Here’s the relevant code with comments that explain what’s happening:

import { computed, ref, onMounted } from ‘vue’;
import { useGeolocation } from ‘…/composables/useGeolocation’;
import { GoogleMap } from ‘@capacitor/google-maps’;

const { coords } = useGeolocation();
const lat = coords.value.latitude;
const lng = coords.value.longitude;
const currPos = computed(() => ({
lat: coords.value.latitude,
lng: coords.value.longitude,
}));

const mapConfig = {
center: {
// The initial position to be rendered by the map
// lat: 32.7, // this works
// lng: -117.1, // this works
lat: coords.value.latitude, // not working, is 0
lng: coords.value.longitude, // not working, is 0
},
zoom: 10,
};

const createMap = async () => {
console.log(lat); // shows 0
console.log(lng); // shows 0
console.log(coords.value.latitude); // shows the correct number
console.log(coords.value.longitude); // shows the correct number
console.log(currPos); // shows _value: and the correct number for lat and lng
console.log(mapConfig); // shows center and 0 for lat and lng
console.log(currPos.value.lat); // shows the correct number
console.log(mapConfig.center.lat); // shows 0
};

I am stuck and do not know how to solve this. I need to set lat and lng of center in the config block to my currPos but it is always 0 no matter what I try. Any help would be appreciated.

2

I’ve made progress and can get the MapConfig values to set correctly. Now I have a problem with the map centering on 0, 0 even though the center: lat and lng value seem to be the numbers I would expect. I think this is a bug in the plugin. Any comments are welcome.

beginning of template

MapsView 
<ion-content>
  <ion-card class="container">
    <ion-card-content>
      <ion-row>
        <ion-col>
          <ion-card>
            <ion-card-content>
              <h4>
                Current : Lat: {{ lat }}, Lng:
                {{ lng }}
              </h4>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <capacitor-google-map ref="mapRef" id="mapID"></capacitor-google-map>
      <ion-button color="primary" @click="logLocData()">Log Location Data</ion-button>
    </ion-card-content>
  </ion-card>
</ion-content>

end of template

beginning script setup lang=“ts” section

import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonCard,
IonCardContent,
IonRow,
IonCol,
IonButton,
IonBackButton,
IonButtons,
} from “@ionic/vue”;
import { computed, ref, onMounted } from “vue”;
import { Geolocation } from “@capacitor/geolocation”;
import { GoogleMap } from “@capacitor/google-maps”;
const GOOGLE_MAPS_API_KEY = “AIzaSyALDYaeZJscn9d6OxiZYw5PQIpQ37olG1I”;

const currPos = ref<any | null>(null);
const lat = ref(1);
const lng = ref(2);

const getLocation = async () => {
console.log(“got getLocation event”);
currPos.value = await Geolocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 20000,
});
lat.value = currPos.value.coords.latitude;
lng.value = currPos.value.coords.longitude;
};

const mapConfig = computed(() => ({
// The initial position to be rendered by the map
center: {
// lat: 32.7, // this works
// lng: -117.1, // this works
lat: lat.value, // problem spot, console shows correct number but map is at 0
lng: lng.value, // problem spot, console shows correct number but map is at 0
},
zoom: 10,
}));

const logLocData = () => {
console.log(“Latitude”, lat.value); // shows correct number for lat
console.log(“Longitude”, lng.value); // shows correct number for lng
console.log(“currPos”, currPos.value); // shows correct number for lat and lng
console.log(“MapCofig”, mapConfig.value); // shows correct number for lat and lng
console.log(“MapCofig Latitude”, mapConfig.value.center.lat); // shows correct number for lat
console.log(“MapCofig Longitude”, mapConfig.value.center.lng); // shows correct number for lng
};

onMounted(async () => {
console.log(“mounted”);
getLocation();
const mapRef = document.getElementById(“mapID”);
const newMap = await GoogleMap.create({
id: “GMap”, // unique identifier for this map instance
element: mapRef as HTMLElement, // reference to the capacitor-google-map element
apiKey: GOOGLE_MAPS_API_KEY, // personal Google Maps API Key
config: mapConfig.value, // map configuration options
});
});

end of script

style section:

.maps {
margin: 0px;
padding: 0px;
background-color: #ffad3b;
}

.small-toolbar {
vertical-align: middle;
–min-height: 48px !important;
–background: #98b9ec;
}

.container {
padding: 0px;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
min-width: 320px;
max-width: 360px;
border-width: 1px;
border-radius: 8px;
border-style: solid;
border-color: #000000;
box-shadow: none;
background-color: #fffae5;
}

.location-text {
margin: 0px;
padding: 0 6px;
text-align: left;
}

capacitor-google-map {
display: inline-block;
width: 320px;
height: 360px;
}

.map__content {
–background: transparent !important;
}