Google Maps Example in Docs - ReferenceError: Can't find variable: createMap

Hello,
first I am super new with ionic-vue framework, please don’t be too hard if this is a beginner issue :slight_smile:

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

The template can only see your script functions and variables if you export them OR switch <script> to <script setup>. See the vue docs to learn about “script setup”.

And I hope you’ll also leverage Aaron’s recent post for adding Google maps to Vue Ionic Capacitor projects: How to use the Ionic Capacitor Google Maps Plugin with Vue JS

1 Like

did you get it working?