https://github.com/ridermansb/vue-gmaps

Search places and address using Google Maps API
https://github.com/ridermansb/vue-gmaps

google-maps hacktoberfest vue vue-component vue-gmaps vuejs2

Last synced: 6 days ago
JSON representation

Search places and address using Google Maps API

• Host: GitHub
• URL: https://github.com/ridermansb/vue-gmaps
• Owner: Ridermansb
• License: agpl-3.0
• Created: 2016-10-05T23:24:52.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-09T21:40:12.000Z (over 1 year ago)
• Last Synced: 2025-04-02T12:48:09.598Z (13 days ago)
• Topics: google-maps, hacktoberfest, vue, vue-component, vue-gmaps, vuejs2
• Language: JavaScript
• Homepage: https://ridermansb.github.io/vue-gmaps
• Size: 664 KB
• Stars: 117
• Watchers: 4
• Forks: 13
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-vuejs - vue-gmaps

README

        
# Vue-Gmaps

> Search address and places using Google Maps API

[Buy me a cofffe][1] please :)

https://buymeacoff.ee/ridermansb

[![Travis](https://img.shields.io/travis/Ridermansb/vue-gmaps.svg?maxAge=2592000?style=flat-square)](https://travis-ci.org/Ridermansb/vue-gmaps)

[![bitHound](https://img.shields.io/bithound/dependencies/github/ridermansb/vue-gmaps.svg?maxAge=2592000?style=flat-square)](https://www.bithound.io/github/Ridermansb/vue-gmaps) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)    

[![NPM](https://nodei.co/npm/vue-gmaps.png?downloads=true&stars=true)](https://nodei.co/npm/vue-gmaps?downloads=true&stars=true)

![Demo](https://github.com/Ridermansb/vue-gmaps/blob/master/vue-gmaps.gif)

## Installation

```bash

npm i -S vue-gmaps

```

And in your `main.js` ...

```javascript

// main.js

import VueGmaps from 'vue-gmaps'

Vue.use(VueGmaps, {

  key: ''

})

```

Options are:

* **key** ,

* **libraries** ,

* **client**

* **version** ,

* **loadGoogleApi** 

libraries: ['places'],

  version: '3'****

## Basic usage

Add the directive `v-gmaps-searchbox` into your input

```html

```

This will popule your `vm.place` object with details about selected place.

## Features

### Specify property

By default, `vm.place` is used, you can change this passing an argument to directive e.g `:anotherProperty`

```html

```

So `vm.myProperty` will be filled with details about selected place

### Specify whats fields

All information about place is put is filled, to determinate whats fields should be use, you can specify a modifiers like this `.name.website.formatted_address.geometry`

```html

```

So your `vm` will set property `myProperty` like this

```javascript

{

    myProperty: {

        name: ,

        website: ,

        formatted_address: ,

        geometry: ,

    }

}

```

[1]: https://buymeacoff.ee/ridermansb