🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple, customizable location picker built using Vue.js and Google Maps’ Places API.

Other

Documentation

Location Picker

Install via NPM

Available through npm as vue-location-picker.

npm install --save vue-location-picker 

Usage

import LocationPickerInit from 'vue-location-picker/src/init' import LocationPicker from 'vue-location-picker'  new Vue({   el: 'body',    // You need to call the LocationPickerInit(appInstance, configObject, optionsObject)   ready () {     LocationPickerInit(       this,        // config object       {         key: 'GoogleMapsApiKey', // required         language: 'en-US'        // optional       },        // options object       {         map: {           center: { lat: 0, lng: 0 },           /** other map options **/         },         marker: { /** marker options **/ },         infoWindow: { /** info window options **/ },         autocomplete: { /** autocomplete options **/ }       }     )   },    data: {     place: null // optional   },    components: { LocationPicker } })
<!-- If you want to get to the selected place, use the 2-way binding variable --> <location-picker :place.sync="place"></location-picker>

Use a custom info window

<!-- MyInfoWindow.vue --> <template>   <!-- ... --> </template>  <script>   export default {     // You should implement these 2 methods     methods: {       showAddress (place) {         // ..       },        showError () {         // ..       }     }   } </script>
// MyLocationPicker.js import LocationPicker from 'vue-location-picker' import InfoWindow from './MyInfoWindow.vue'  export default Object.assign(LocationPicker, {   components: { InfoWindow } })
// main.js import LocationPicker from './MyLocationPicker'  new Vue({   components: { LocationPicker } })

License

LocationPicker is released under the MIT License. See the bundled LICENSE file for details.


You May Also Like