[Vuejs]-Update a Google Map on input change with Vue.js

by

0👍

You can define map and marker data properties in Vue instance.

So data in Vue should be:

data: {
  activeStep: 0,
  city: '',
  state: '',
  address: '',
  lat: undefined,
  lng: undefined,
  marker: '',
  map: ''
}

Then you could access the Vue instance through vnode.context and assign the data properties.

Directive:

Vue.directive('map', {
  // When the bound element is inserted into the DOM:
  inserted: function (el, binding, vnode) {
    var map = new google.maps.Map(document.getElementById('location-map'), {
      zoom: 15,
      draggable: false,
      panControl: false,
      scrollwheel: false,
      streetViewControl: false,
      fullscreenControl: false,
      center: binding.value,
      disableDoubleClickZoom: true
    });
    var marker = new google.maps.Marker({
      map: map,
      position: binding.value
    });
    vnode.context.$data.marker = marker
    vnode.context.$data.map = map
  }
})

Demo: Link

Leave a comment