ljinkai / vue-google-maps-zipcode-input

Vue component that manages the complexity of auto-suggesting a zipcode with google maps

vue-google-maps-zipcode-input

This component provides an easy way to handle google maps zipcode autocompletion wih Vue. Due to various restrictions on the Google Maps Platform, reverse geocoding may be required to end up with an actual zipcode, which this component handles.

Usage

The Demo.vue provides an example integration of this component.

This component uses slots so you can provide your own input. The only requirement is to add ref="autocomplete" on the input element.

<!-- Google Maps need to be loaded on your page with the places library enabled -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=1234&libraries=places"></script>

<!-- ... -->

<Zipcode @selected="zipcodeSelected" country="FR">
  <input type="text" ref="autocomplete">
</Zipcode>

import Zipcode from './Zipcode.vue';

export default {
  methods: {
    zipcodeSelected(location) {
      console.log(location);
    },
  },
  components: {
    Zipcode,
  }
}

Props

• country can be used to restrict the suggestions scope

Events

• selected