Vue2GooglemapExample

by hoverwu

HTML

<body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
  <script src="https://rawgit.com/Kofre/vue-google-maps/master/dist/vue-google-maps.js"></script>
  
  <div id="app">
    <div v-for="m in markers">{{ m.position }}</div>
    <div style="width: 100%; height: 600px">  
      <google-map :center="center" :zoom="12" @g-rightclick="newMarker">
        <map-marker
           :position="m.position"
           @position_changed="m.position=$event"
           :opacity="m.opacity"
           :draggable="m.draggable"
           @draggable_changed="m.draggable=$event"
           v-for="m in markers"
           >
       </map-marker>
          <gmap-polyline v-bind:path.sync="path" v-bind:options="{ strokeColor:'#FF8FF0'}">
         </gmap-polyline>
      </google-map>
    </div>      
  </div>   
</body>

JavaScript

VueGoogleMap.load({
    'key': 'AIzaSyBmeTzACveQcb8BuXt3iqQrzn32YTPXaa8',
})

new Vue({
	el: '#app',
  data: {
  path: [
            {lat: 55.9352001, lng: -4.7766924 },
            {lat: 55.9358131, lng: -4.7770143 },
            {lat: 55.9361256, lng: -4.7767353 },
            {lat: 55.9366784, lng: -4.7739458 }
],
		center: { lat: 55.9352001, lng: -4.7766924},
    markers: []
	},
  methods: {
    newMarker: function (mouseArgs) {
      const createdMarker = this.addMarker()
      createdMarker.position.lat = mouseArgs.latLng.lat()
      createdMarker.position.lng = mouseArgs.latLng.lng()
      console.log(createdMarker.position.lat, createdMarker.position.lng)
    },
    addMarker: function () {
      this.markers.push({
        position: { lat: 55.9352001, lng: -4.7766924 },
        draggable: true,
        enabled: true
      })
      return this.markers[this.markers.length - 1]
    }
  },
	components: {
    'googleMap': VueGoogleMap.Map,
    'MapMarker': VueGoogleMap.Marker
  }
});