Skip to content

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

Notifications You must be signed in to change notification settings

selency/vue-google-maps-zipcode-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

demo

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published