Hề lô anh em , hôm nay mình sẽ chỉ cho anh em làm thế nào để tích hợp Google Map vào trogn project Vue của chúng ta nhé.

Ứng dụng nhỏ này của chúng ta sẽ có thêm chức năng tìm kiếm đơn giản và đánh dấu vị trí trên bản đồ. Để thúc hiện việc này thì mình sử dụng package vue2-google-maps package

Và đây là các bước mà chúng ta sắp làm :

• Bước 1: Cài đặt Vue Project
• Bước 2: Cài đặt Vue2 Google Maps
• Bước 3: Lấy Google Maps API Key
• Bước 4: Đăng kí Vue Google Maps Module
• Bước 5: Tạo Vue Component
• Bước 6: Show Google Map
• Bước 7: Chạy App

Bắt đầu thôiiii !!!

Cài đặt Vue Project

Chúng ta chạy câu lệnh sau :

npm install -g @vue/cli

Tiếp tục chạy để tạo ra một app Vue mới :

vue create vue-demo-app

Sau đó là cd vào project nào :

cd vue-demo-app

Cài đặt Vue2 Google Maps

Tiếp theo chúng ta tiến hành cài đặt package Vue2 Google Maps :

npm install vue2-google-maps

Lấy Google Maps API Key

Okk , bước tiếp theo chúng ta cần phải làm là lấy API key :

• Mọi người vô đây Google Cloud Platform.
• Tiếp theo đó chúng ta tạo một project mới bằng cách click vô phần select a project, rồi NEW PROJECT.
• Hãy chắc chắn rằng mọi người đã click vô APIs & Services > Credentials ở phần bên trái của menu.
• Sau đó, click vào Create Credentials và chọn API Key .
• Copy lại API key mà chúng ta vừa nhận được trên màn hình.
• Sau đó click vô Credentals, chọn Enable APIs and Services , enable cả services Maps JavaScript API và Places API nữa nhé .

Đăng kí Vue Google Maps Module

Chúng ta cần import "vue2-google-maps" module và đưa vào trong method use(). Điều này cho phép chúng ta truy cập vào các methods và properties trong Vue template.

import Vue from 'vue'
import App from './App.vue'

import * as VueGoogleMaps from "vue2-google-maps" // Import package

Vue.config.productionTip = false

Vue.use(VueGoogleMaps, {
  load: {
    key: "GOOGLE MAP API KEY GOES HERE",
    libraries: "places"
  }
});

new Vue({
  render: h => h(App),
}).$mount('#app')

Tạo Vue Component

Tạo một component theo đường dẫn sau nào src/components/AddGoogleMap.vue :

<template>
  <div>
    <div>
      <h2>Vue Js Search and Add Marker</h2>

      <label>
        <gmap-autocomplete @place_changed="initMarker"></gmap-autocomplete>

        <button @click="addLocationMarker">Add</button>
      </label>
      <br/>
 
    </div>
    <br>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
 
<script>
export default {
  name: "AddGoogleMap",
  data() {
    return {
      center: { 
        lat: 39.7837304,
        lng: -100.4458825
      },
      locationMarkers: [],
      locPlaces: [],
      existingPlace: null
    };
  },
 
  mounted() {
    this.locateGeoLocation();
  },
 
  methods: {
    initMarker(loc) {
      this.existingPlace = loc;
    },
    addLocationMarker() {
      if (this.existingPlace) {
        const marker = {
          lat: this.existingPlace.geometry.location.lat(),
          lng: this.existingPlace.geometry.location.lng()
        };
        this.locationMarkers.push({ position: marker });
        this.locPlaces.push(this.existingPlace);
        this.center = marker;
        this.existingPlace = null;
      }
    },
    locateGeoLocation: function() {
      navigator.geolocation.getCurrentPosition(res => {
        this.center = {
          lat: res.coords.latitude,
          lng: res.coords.longitude
        };
      });
    }
  }
};
</script>

Thằng gmap-autocomplete sẽ autocomplete hiển thị tìm kiếm vị trí, cho phép chúng ta tìm kiếm vị trí và đánh dấu. gmap-map sẽ hiển thị bản đồ.

Show Google Map

Okk giờ chúng ta import component vào nào :

<template>
   <div id="app">
      <AddGoogleMap />
   </div>
</template>
 
<script>
import AddGoogleMap from "./components/AddGoogleMap";
 
export default {
  name: 'App',
  components: {
    AddGoogleMap
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscaleChạy App;
  text-align: center;
  color: #000000;
  margin-top: 50px;
}
</style>

Chạy App

Giờ việc cuối cùng cần làm là chạy App và hưởng thụ thành quả thôi :

npm run serve

thông thường thì nó sẽ chạy trên đường dẫn :

http://localhost:8080

Kết bài

Vậy là bài tìm hiểu của chúng ta đến đây là kết thúc rồi, anh em hãy thử vọc theo nhé.

Nếu thấy giúp ích cho mình , hãy like, share và upvote cho mình nhé.

Many thanksss