Add Map

resources/js/app.js

@@ -9,6 +9,7 @@ window.axios.defaults.baseUrl = 'http://localhost:8000/';
 import Vue from 'vue';
 import Vuetify from 'vuetify';
 import iView from 'iview';
+import * as VueGoogleMaps from 'vue2-google-maps';
 
 import App from './App.vue';
 import router from './route';
@@ -24,6 +25,19 @@ iView.LoadingBar.config({
     height: 3
 });
 
+Vue.use(VueGoogleMaps, {
+    load: {
+      key: 'AIzaSyBJWuQmrf6UgrkGbMJF6-m1GwTZrazBFBo',
+      libraries: 'places', // This is required if you use the Autocomplete plugin
+      // OR: libraries: 'places,drawing'
+      // OR: libraries: 'places,drawing,visualization'
+      // (as you require)
+   
+      //// If you want to set the version, you can do so:
+      // v: '3.26',
+    }
+})
+
 const app = new Vue({
     el: '#app',
     router,

resources/js/views/Addjob.vue

@@ -140,13 +140,16 @@
                                     <img :src="srcImageMap" alt="">
                                 </v-flex>                            
                                 <v-flex sm12 xs12>
-                                    <v-text-field
-                                        label="ค้นหาสถานที่"
-                                        style="height:50px;"
-                                    ></v-text-field>
+                                    <GmapAutocomplete type="text" @place_changed="setPlace">
+                                    </GmapAutocomplete>
                                 </v-flex>                             
                                 <v-flex sm12 xs12>
-                                    <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3851.7461712415493!2d104.9009800139957!3d15.117311868259526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x311684db0c98987f%3A0x228caf3246f0fd8e!2z4Lih4Lir4Liy4Lin4Li04LiX4Lii4Liy4Lil4Lix4Lii4Lit4Li44Lia4Lil4Lij4Liy4LiK4LiY4Liy4LiZ4Li1!5e0!3m2!1sth!2sth!4v1555418432669!5m2!1sth!2sth" width="400" height="200" frameborder="0" style="border:0" allowfullscreen></iframe> -->
+                                    <GmapMap v-if="this.place" style="width: 400px; height: 200px;" :zoom="15" :center="{lat: lat, lng: long}">
+                                        <GmapMarker
+                                            :position="{lat: lat, lng: long}"
+                                            @dragend="dragMarker"
+                                        />
+                                    </GmapMap>
                                 </v-flex>                           
                             </v-layout>
                             
@@ -469,10 +472,22 @@ export default {
                 'มักกะสัน',
                 'ราชปรารภ',
                 'พญาไท'
-            ]
+            ],
+            place: null,
+            lat: 15.1179961,
+            long: 104.9016003
         }
     },
     methods: {
+        dragMarker (e) {
+            this.lat = e.latLng.lat()
+            this.long = e.latLng.lng()
+        },
+        setPlace(place) {
+            this.place = place
+            this.lat = this.place.geometry.location.lat()
+            this.long = this.place.geometry.location.lng()
+        },
         selectFile (e) {
             const file = e.target.files
             if (!file.length) {