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;
}