Provide custom loader instance

[alessandrorubio]

I was wondering if instead of providing the API_KEY directly in the googleMap component there is a way to provide my own loader instance that is being used in my custom component.

[HusamElbashir]

You can pass a promise through the apiPromise prop which should resolve to the global google object. Example:

<script setup>
import { GoogleMap, Marker } from 'vue3-google-map';
import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
  apiKey: '',
  version: 'weekly',
  libraries: ['places'],
});

const apiPromise = loader.load();

const center = { lat: 40.689247, lng: -74.044502 };
</script>

<template>
  <GoogleMap
    :api-promise="apiPromise"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
  >
    <Marker :options="{ position: center }" />
  </GoogleMap>
</template>

Live Demo