Hello,
first I am super new with ionic-vue framework, please don’t be too hard if this is a beginner issue
I am trying to implement the google maps example from the ionic docs
In Xcode I get the error ReferenceError: Can’t find variable: createMap when I click on the button.
But I see the createMap constant in the code … so i have no idea why its not working.
<template>
<div id="container">
<capacitor-google-map id="map"></capacitor-google-map>
<button onclick="createMap()">Create Map</button>
</div>
</template>
<script>
import { GoogleMap } from '@capacitor/google-maps';
const apiKey = 'AIzaSyDxoedOx8rMD3p9XlPFCZ_PylnFhN8tlWZ';
const mapRef = document.getElementById('map');
const createMap = async () => {
const mapRef = document.getElementById('map');
const newMap = await GoogleMap.create({
id: 'map', // Unique identifier for this map instance
element: mapRef, // reference to the capacitor-google-map element
apiKey: apiKey, // Your Google Maps API Key
config: {
center: {
// The initial position to be rendered by the map
lat: 33.6,
lng: -117.9,
},
zoom: 8, // The initial zoom level to be rendered by the map
},
});
};
</script>
<style scoped>
capacitor-google-map {
display: inline-block;
width: 275px;
height: 400px;
}
</style>
Would be nice if someone can kick me in the right direction …
thank you in advance