Ridermansb / Vue Gmaps
Licence: agpl-3.0
Search places and address using Google Maps API
Stars: ✭ 108
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Gmaps
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+891.67%)
Mutual labels: hacktoberfest, vue-component, vuejs2
Vue2 Notify
Simple Vue2 notification component
Stars: ✭ 36 (-66.67%)
Mutual labels: vue-component, vuejs2
Vue Gh Corners
GitHub Corners for Vue.
Stars: ✭ 30 (-72.22%)
Mutual labels: hacktoberfest, vue-component
Bikedeboa
A (Progressive) Web App to find, map and review bike parkings in the cities of Brazil.
Stars: ✭ 54 (-50%)
Mutual labels: hacktoberfest, google-maps
Flask Googlemaps
Easy way to add GoogleMaps to Flask applications. maintainer: @RiverFount
Stars: ✭ 550 (+409.26%)
Mutual labels: hacktoberfest, google-maps
Leku
🌍 Map location picker component for Android. Based on Google Maps. An alternative to Google Place Picker.
Stars: ✭ 612 (+466.67%)
Mutual labels: hacktoberfest, google-maps
Navscroll Js
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.
Stars: ✭ 41 (-62.04%)
Mutual labels: vue-component, vuejs2
Vue Numeral Filter
Vue.js filter for Numeral.js 🔢 🔣
Stars: ✭ 73 (-32.41%)
Mutual labels: vue-component, vuejs2
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+1029.63%)
Mutual labels: vue-component, vuejs2
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (-18.52%)
Mutual labels: vue-component, vuejs2
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+392.59%)
Mutual labels: hacktoberfest, vuejs2
Vue Googlemaps
Integrate Google Maps in your Vue application
Stars: ✭ 516 (+377.78%)
Mutual labels: google-maps, vuejs2
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+6264.81%)
Mutual labels: vue-component, vuejs2
Vue Star Rating
⭐️ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: ✭ 509 (+371.3%)
Mutual labels: vue-component, vuejs2
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-13.89%)
Mutual labels: vue-component, vuejs2
Pdfvuer
A PDF viewer for Vue using Mozilla's PDF.js
Stars: ✭ 443 (+310.19%)
Mutual labels: hacktoberfest, vue-component
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+310.19%)
Mutual labels: vue-component, vuejs2
Vee Validate
✅ Form Validation for Vue.js
Stars: ✭ 8,820 (+8066.67%)
Mutual labels: hacktoberfest, vuejs2
Nextcloud Vue
🍱 Vue.js components for Nextcloud app development ✌
Stars: ✭ 89 (-17.59%)
Mutual labels: hacktoberfest, vuejs2
Vue-Gmaps
Search address and places using Google Maps API
Buy me a cofffe please :)
https://buymeacoff.ee/ridermansb
Installation
npm i -S vue-gmaps
And in your main.js
...
// main.js
import VueGmaps from 'vue-gmaps'
Vue.use(VueGmaps, {
key: '<your api here>'
})
Options are:
- key <Required!>,
- libraries <Default= [ 'places' ]>,
- client
- version <Default='3'>,
- loadGoogleApi <Default=true>
libraries: ['places'], version: '3'****
Basic usage
Add the directive v-gmaps-searchbox
into your input
<input v-model=vm.searchPlace v-gmaps-searchbox=vm>
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
<input v-gmaps-searchbox:myProperty=vm>
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
<input v-gmaps-searchbox:myProperty.name.website.formatted_address.geometry=vm>
So your vm
will set property myProperty
like this
{
myProperty: {
name: <value_from_result>,
website: <value_from_result>,
formatted_address: <value_from_result>,
geometry: <value_from_result>,
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].