Vue Google Places Autocomplete

Overview

Vue Google Places Autocomplete

Install

import VueGooglePlaces from 'vue-google-places'
Vue.use(VueGooglePlaces)

This module will load all needed google librarys automatically at first usage

Use

  <VueGooglePlaces
    :api-key="apiKey"
    types="(cities)"
    country="ua"
    placeholder="Input your place"
    @placechanged="onPlaceChanged"
    @noresult="onNoResult"
  />

Props

name type default description
apiKey String - Google api key
enableGeolocation Boolean false component will ask user geolocation
enableGeocode Boolean false conponent will automatically find user place by his geolocation. This depends of enableGeolocation property
version String - version of google maps api
types String, Array - Google places types See google docs (Table 3)

Available types:

  • geocode
  • address
  • establishment
  • (regions)
  • (cities)

Events

  • placechanged: Place - when user has selected new place
  • input: String - name of selected place
  • noresult: Place - when place has changed but details was not found

Slots

  • default - in this slot you can put your own input component

Other frameworks

This component implemented in such frameworks:

Vuetify

  import { VuetifyGooglePlaces } from 'vue-google-places'
  <VuetifyGooglePlaces
    :api-key="apiKey"
    types="(cities)"
    country="us"
    placeholder="Input your place"
    @placechanged="onPlaceChanged"
  />

To implement this module in other frameworks - welcome to contribute! Please use VuetifyGooglePlaces as template

Implementation with own input component

To use with own input component use default slot. VueGooglePlaces will automatically find html input element

  import { VueGooglePlaces } from 'vue-google-places'
  <VueGooglePlaces
    :api-key="apiKey"
    class="subheading"
    :enable-geolocation="true"
    types="(cities)"
    country="us"
    @placechanged="getAddressData"
  >
    <MyInput
      icon="search"
      :value="value"
      :placeholder="$t('Your place')"
      ...
    />
  </VueGooglePlaces>
You might also like...
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

🗺 Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Owner
Yunus Shaikh
Yunus is Laravel / Vuejs developer. Specialized in Building REST APIs . I care deeply about delivering Quality work.
Yunus Shaikh
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Daniel Sim 1.9k Jan 6, 2023
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Guillaume Chau 534 Nov 2, 2022
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Keagan Chisnall 102 Oct 5, 2022
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

eric regnier 130 Sep 14, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

Guillaume Leclerc 556 Nov 21, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Inocan Group 111 Dec 29, 2022
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

Fawad Mirzad 117 Dec 28, 2022
Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Edoardo Gargano 6 Apr 22, 2022
Vue with Typescript and Google Map

CONTRIBUTORS NEEDED! My projects at work have also gradually migrated away from Google Maps (but still on Vue -- Vue's awesome!), so there's less and

An Nguyen Van 8 Oct 16, 2021
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

Eduardo P. Rivero 23 Nov 24, 2022