Hello, I am currently facing an issue trying to add my API key to my Google map. Initially, everything worked fine when I used the string version of the key. However, I prefer to keep the key in my .env file. When I made this change, I encountered the Google Maps JavaScript API error: NotLoadingAPIFromGoogleMapsError. Any assistance on this matter would be greatly appreciated! Thank you.
*Edit: Upon further inspection, I have realized that the problem arises when attempting to load the API key from my .env file. The map loads successfully when I replace the line with process.env.VUE_APP_GOOOGLEMAPS_KEY; and input the actual API key.
MapPage.vue
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Map</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<GoogleMap :api-key="API_KEY" style="width: 100%; height: 500px" :center="center" :zoom="15">
<Marker :options="{ position: center }" />
</GoogleMap>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { GoogleMap, Marker } from "vue3-google-map";
export default {
name: 'MapPage',
components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage, GoogleMap, Marker },
setup() {
const center = { lat: 40.689247, lng: -74.044502 };
const API_KEY = process.env.VUE_APP_GOOOGLEMAPS_KEY;
return { center,API_KEY };
},
};
</script>