https://github.com/Akryum/vue-googlemaps

Integrate Google Maps in your Vue application
https://github.com/Akryum/vue-googlemaps

google-maps vuejs vuejs2

Last synced: 19 days ago
JSON representation

Integrate Google Maps in your Vue application

• Host: GitHub
• URL: https://github.com/Akryum/vue-googlemaps
• Owner: Akryum
• Created: 2017-09-05T09:41:42.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-02T04:20:11.000Z (over 3 years ago)
• Last Synced: 2024-04-14T12:09:33.772Z (7 months ago)
• Topics: google-maps, vuejs, vuejs2
• Language: JavaScript
• Homepage: https://akryum.github.io/vue-googlemaps/
• Size: 2.77 MB
• Stars: 532
• Watchers: 15
• Forks: 60
• Open Issues: 46
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome - Akryum/vue-googlemaps - Integrate Google Maps in your Vue application (JavaScript)
• awesome - Akryum/vue-googlemaps - Integrate Google Maps in your Vue application (JavaScript)

README

        
# vue-googlemaps

[![npm](https://img.shields.io/npm/v/vue-googlemaps.svg) ![npm](https://img.shields.io/npm/dm/vue-googlemaps.svg)](https://www.npmjs.com/package/vue-googlemaps)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

Integrate Google Maps in your Vue application in a "Vue-way".

> This library is Work In Progress.

> More components will be available in the 1.0 release.

[Live demo](https://akryum.github.io/vue-googlemaps/)

The main objective of the library is to use Google Maps using Vue components in a way that feels natural to Vue developpers (with props, events, slots...).



  

    

  



## Sponsors

### Gold



  

    

  



### Silver



  

    

  

  

    

  



### Bronze



  

    

  

  

    

  






## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

- [Builtin components](#builtin-components)

- [Create you own components](#create-you-own-components)

- [Quick Examples](#quick-examples)

## Installation

```

npm i -S vue-googlemaps

```

```

yarn add vue-googlemaps

```

*You need to [polyfill](https://babeljs.io/docs/usage/polyfill/) some ES2015 features in old browsers.*

## Usage

You need a Google API key from the [developer console](http://console.developers.google.com/).

```js

import 'vue-googlemaps/dist/vue-googlemaps.css'

import VueGoogleMaps from 'vue-googlemaps'

Vue.use(VueGoogleMaps, {

  load: {

    // Google API key

    apiKey: 'your-google-api-key',

    // Enable more Google Maps libraries here

    libraries: ['places'],

    // Use new renderer

    useBetaRenderer: false,

  },

})

```

## Builtin components

(Documentation is work-in-progress)

- Circle

- Geocoder

- Map

- Marker

- NearbyPlaces

- PlaceDetails

- UserPosition

- *More to come!*

## Create you own components

Here is an example of what a `Marker` component would look like:

```js

import { MapElement } from 'vue-googlemaps'

// Those Vue props will update automatically

// (Two-way binding with .sync modifier)

const boundProps = [

  'animation',

  'clickable',

  'cursor',

  'draggable',

  // ...

]

// Events from Google Maps emitted as Vue events

const redirectedEvents = [

  'click',

  'rightclick',

  'dblclick',

  'drag',

  // ...

]

export default {

  mixins: [

    // You need to use this mixin

    MapElement,

  ],

  // When Google Maps is ready

  googleMapsReady () {

    const options = Object.assign({}, this.$props)

    options.map = this.$_map

    // Create Google Maps objects

    this.$_marker = new window.google.maps.Marker(options)

    // Bind the Vue props

    this.bindProps(this.$_marker, boundProps)

    // Emit the events from Google Maps

    this.redirectEvents(this.$_marker, redirectedEvents)

  },

  beforeDestroy () {

    // Teardown

    if (this.$_marker) {

      this.$_marker.setMap(null)

    }

  },

}

```

## Quick Examples

### Map with markers

```html

  

  

  

```

### Place Details

```html

 ..."

>

  

    
{{ props.results.name }}

    
{{ props.results.formatted_address }}

  


```

### Geocoder

```html

 ..."

>

  

    
{{ props.results[1].name }}

    
{{ props.results[0].formatted_address }}

  


```

### Nearby places

```html

 mapBounds = map.getBounds()"

/>

 ..."

>

  

    
Loading...


    


      


        

        {{ result.name }}

      

      
{{ result.vicinity }}

    

  


```