@vanderb/vue-async-gmaps

vue-async-gmaps

Load google maps with privacy

Let your user decide to load google-maps by click

Notes

This package uses promised google-maps load based on article by Markus Oberlehner
https://markus.oberlehner.net/

Article: https://markus.oberlehner.net/blog/using-the-google-maps-api-with-vue/

Installation

Install package

// via npm
npm install @vanderb/vue-async-gmaps --save
// via yarn
yarn add @vanderb/vue-async-gmaps

Implementation

import VueAsyncGmaps from '@vanderb/vue-async-gmaps'

Vue.component('VueAsyncGmaps', VueAsyncGmaps)

Example

<vue-async-gmaps/>

Options

Api-Key

Insert your google-maps api-key via api-key-property

<vue-async-gmaps api-key="YOUR_GOOGLE_MAPS_API_KEY"/>

Config

Insert your google-maps config via :config-property

<vue-async-gmaps ... :config="{center: {lat: 50.935173, lng: 6.953101}, zoom: 11}"/>

Markers

To add markers just add markers-property with array of marker-objects

• position = {lat: xxx, lng: xxx} (required)
• icon = {} (optional)
  • url = Marker-Icon-Url
• details = {} (optional)
  • title
  • description
  • address
  • zip
  • city
  • link
  • link_text
• animation [DROP, BOUNCE] (optional, BOUNCE not fully supported yet)

<vue-async-gmaps ... :markers="[{position: {lat: 50.935173, lng: 6.953101}, details: {title: 'My Marker'}}]"/>

Button

You can change button-text and class

<vue-async-gmaps button-text="Aye aye, sir" button-class="captains-button"/>

Slot

You can change the default content by slot. If you do you have to insert Button or trigger by yourself (click-handler included)

<vue-async-gmaps>
  <!-- Default Slot (adding custom markup) -->
  <span>Trolooloooo</span>
  
    <!-- Trigger Slot (adding custom trigger) -->
  <template v-slot:trigger="{ initGoogleMaps }">
    <span @click="initGoogleMaps">Aye aye, sir</span>
  </template>
</vue-async-gmaps>