Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vanderb/vue-async-gmaps

Load google maps with privacy
https://github.com/vanderb/vue-async-gmaps

Last synced: 2 months ago
JSON representation

Load google maps with privacy

Lists

README 

        
# 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



```bash

// via npm

npm install @vanderb/vue-async-gmaps --save

// via yarn

yarn add @vanderb/vue-async-gmaps

```



#### Implementation



```javascript

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



Vue.component('VueAsyncGmaps', VueAsyncGmaps)



```

## Example



```html



```



## Options



### Api-Key



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

```html



```



### Config



Insert your google-maps config via `:config`-property

```html



```



### 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)



```html



```



### Button



You can change button-text and class



```html



```



## Slot



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



```html



  

  Trolooloooo

  

    

  

    Aye aye, sir

  



```