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.