search

inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
272 stars 54 forks source link

Provide custom loader instance #99

Closed alessandrorubio closed 1 year ago

alessandrorubio commented 1 year ago

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 commented 1 year ago

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