基本設定與使用

首先在 index.html 檔案中將 Maps JavaScript API 載入，當中的「YOUR_API_KEY」要替換成剛剛取得的專案 API Key

接著在 views 資料夾中建立一個 Restaurants.vue 的檔案，我們想要將地圖呈現出來，因此在  中合適的地方，加入

等下地圖就會呈現在這：

選擇好呈現的位置後，再來就是設定地圖的大小 — 在 Restaurants.vue 檔案裡的

.google-map {
  width: 100%;
  height: 400px;
}
最後一步，是在 mounted 階段建立一個地圖與一個地標：
export default {
  name: "Restaurants",
  data() {
    return {
      map: null,
      // 預設經緯度在信義區附近
      lat: 25.0325917,
      lng: 121.5624999
    };
  },
  mounted() {
    this.initMap();
    this.setMarker();
  },
  methods: {
    // 建立地圖
    initMap() {
      // 透過 Map 物件建構子建立新地圖 map 物件實例，並將地圖呈現在 id 為 map 的元素中
      this.map = new google.maps.Map(document.getElementById("map"), {
        // 設定地圖的中心點經緯度位置
        center: { lat: this.lat, lng: this.lng },
        // 設定地圖縮放比例 0-20
        zoom: 15,
        // 限制使用者能縮放地圖的最大比例
        maxZoom: 20,
        // 限制使用者能縮放地圖的最小比例
        minZoom: 3,
        // 設定是否呈現右下角街景小人
        streetViewControl: false,
        // 設定是否讓使用者可以切換地圖樣式：一般、衛星圖等
        mapTypeControl: false
      });
    },
    // 建立地標
    setMarker() {
      // 建立一個新地標
      const marker = new google.maps.Marker({
        // 設定地標的座標
        position: { lat: this.lat, lng: this.lng },
        // 設定地標要放在哪一個地圖
        map: this.map
      });
    }
  }
};
😃 Map Options 建立地圖時的設定
1. center: 設定地圖的中心點經緯度位置 
2. zoom: 設定地圖縮放比例--0 能看到個地球的比例、20 能看到大樓的比例
3. streetViewControl: 設定是否呈現右下角街景小人，讓使用者能使用街景功能
4. mapTypeControl: 設定是否讓使用者可以切換地圖樣式：公路圖、衛星圖等
5. mapTypeControlOptions: 針對「切換地圖樣式」能有更多客製化設定，如樣式等
6. fullscreenControl: 設定是否讓使用者可以點擊開啟全螢幕地圖功能
7. zoomControl: 設定顯示縮放大小的控制鈕（地圖尺寸小於200x200px時預設消失）
8. ZoomControlOptions: 針對縮放大小按鈕有更多設定，如更改在地圖上的擺放位置
 
Map Option 相關設定在地圖上的示意圖
Voila! 一張簡單的地圖配上一個小地標就能呈現出來了：
顯示一個地圖與一個地標
😃 Marker 地標特效與客製化
1. animation 屬性: 設定地標特效--DROP 為從地圖上方墜落 / BOUNCE 會持續彈跳
2. icon 屬性: 設定使用客製化的地標圖示
3. draggable 屬性: 設定地標可以被使用者拖拉至他處
顯示地標資訊
目前在地圖上只有單純顯示地標，如果想給予地標更多的資訊 — 例如在點擊地標後，使用者可以看到餐廳名稱 — 則可以使用 Info Windows 來實作：
export default {
  name: "Restaurants",
  data() {
    return {
      map: null,
      lat: 25.0325917,
      lng: 121.5624999
    };
  },
  mounted() {
    this.initMap();
    this.setMarker();
  },
  methods: {
    // 建立地圖
    initMap() {
      this.map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: this.lat, lng: this.lng },
        zoom: 15,
        maxZoom: 20,
        minZoom: 3,
        streetViewControl: false,
        mapTypeControl: false
      });
    },
    // 建立地標
    setMarker() {
      const marker = new google.maps.Marker({
        position: { lat: this.lat, lng: this.lng },
        map: this.map
      });
      // 透過 InfoWindow 物件建構子建立新訊息視窗
      const infowindow = new google.maps.InfoWindow({
        // 設定想要顯示的內容
        content: `
          

            
好食餐廳

          

        `,
        // 設定訊息視窗最大寬度
        maxWidth: 200
      });
      // 在地標上監聽點擊事件
      marker.addListener("click", () => {
        // 指定在哪個地圖和地標上開啟訊息視窗
        infowindow.open(this.map, marker);
      });
    }
  }
};
由於有在地標上綁定點擊事件的監聽器，因此現在只要點擊地標，就會觸發info window的 open() 方法，開啟餐廳資訊視窗：
 
 
置放多個地標
在地圖上也可以置放多個地標 — 例如想在地圖上標示出信義區有營運的好幾間餐廳。為了簡化向後端資料庫取得餐廳資訊，先暫時使用 Dummy Data：
建立 Dummy Data
建立一個 xinyi.json 的檔案，以 JSON 格式存放信義區預設的地圖中心點與四間信義區的餐廳名稱、ID、座標位置：
{
  "center": {
    "lat": 25.0325917,
    "lng": 121.5624999
  },
  "restaurants": [
    {
      "id": 1,
      "name": "餐廳一",
      "lat": 25.0340,
      "lng": 121.5645
    },
    {
      "id": 2,
      "name": "餐廳二",
      "lat": 25.036643,
      "lng": 121.567678
    },
    {
      "id": 3,
      "name": "餐廳三",
      "lat": 25.033643,
      "lng": 121.566678
    },
    {
      "id": 4,
      "name": "餐廳四",
      "lat": 25.031569,
      "lng": 121.568579
    }
  ]
}
使用 Dummy Data 在地圖上建立四個地標
首先在 Restaurants.vue 中載入剛建立好的 xinyi.json 檔案，並在 mounted() 階段透過 fetchRestaurants() 取得並更新餐廳與中心點座標
在 setMarker() 中透過迴圈，在地圖上為四間餐廳分別建立地標與訊息視窗，且在地標加上事件監聽器，在監聽到點擊事件時，開啟訊息視窗：
// 引入餐廳 Dummy data
import dummyRestaurants from "../dummy_data/xinyi.json";
export default {
  name: "Restaurants",
  data() {
    return {
      map: null,
      lat: 25.0325917,
      lng: 121.5624999,
      restaurants: []
    };
  },
  mounted() {
    this.initMap();
    // 取得餐廳假資料
    this.fetchRestaurants();
    // 使用餐廳假資料建立地標
    this.setMarker();
  },
  methods: {
    fetchRestaurants() {
      this.restaurants = dummyRestaurants.restaurants;
      this.lat = dummyRestaurants.center.lat;
      this.lng = dummyRestaurants.center.lng;
    },
    initMap() {
      this.map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: this.lat, lng: this.lng },
        zoom: 15,
        maxZoom: 20,
        minZoom: 3,
        streetViewControl: false,
        mapTypeControl: false
      });
    },
    setMarker() {
      // 為每間餐廳都建立地標、訊息視窗、事件監聽
      this.restaurants.forEach(location => {
        const marker = new google.maps.Marker({
          // 設定為該餐廳的座標
          position: { lat: location.lat, lng: location.lng },
          map: this.map
        });
        // 建立訊息視窗
        const infowindow = new google.maps.InfoWindow({
          content: `
          

            
${location.name}

          

        `,
          maxWidth: 200
        });
        // 綁定點擊事件監聽
        marker.addListener("click", () => {
          infowindow.open(this.map, marker);
        });
      });
    }
  }
};
接著就能在地圖上看到多個地標和效果：
 
一次只顯示一個地標資訊視窗
訊息視窗透過 open() 方法開啟後，將持續保持開啟狀態，直到使用者點擊關閉的圖示。若希望一次只能開啟一個訊息視窗 — 也就是當點擊第二的地標時，會先將第一個地標的訊息視窗將關閉，才開啟第二個視窗 — 則可以透過 Info Windows 的 close() 方法，指定關閉視窗：
// 引入餐廳 Dummy data
import dummyRestaurants from "../dummy_data/xinyi.json";
export default {
  name: "Restaurants",
  data() {
    return {
      map: null,
      lat: 25.0325917,
      lng: 121.5624999,
      restaurants: [],
      // 存放目前開啟的訊息視窗
      infowindow: null
    };
  },
  mounted() {
    this.initMap();
    // 取得餐廳假資料
    this.fetchRestaurants();
    // 使用餐廳假資料建立地標
    this.setMarker();
  },
  methods: {
    fetchRestaurants() {
      this.restaurants = dummyRestaurants.restaurants;
      this.lat = dummyRestaurants.center.lat;
      this.lng = dummyRestaurants.center.lng;
    },
    initMap() {
      this.map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: this.lat, lng: this.lng },
        zoom: 15,
        maxZoom: 20,
        minZoom: 3,
        streetViewControl: false,
        mapTypeControl: false
      });
    },
    setMarker() {
      // 為每間餐廳都建立地標、訊息視窗、事件監聽
      this.restaurants.forEach(location => {
        const marker = new google.maps.Marker({
          // 設定為該餐廳的座標
          position: { lat: location.lat, lng: location.lng },
          map: this.map
        });
        // 建立訊息視窗
        const infowindow = new google.maps.InfoWindow({
          content: `
          

            
${location.name}

          

        `,
          maxWidth: 200
        });
        // 綁定點擊事件監聽
        marker.addListener("click", () => {
          // 如果目前有開啟中的訊息視窗，先將其關閉 
          if (this.infowindow) this.infowindow.close();
          // 顯示被點擊地標的訊息視窗
          infowindow.open(this.map, marker);
          // 存入目前開啟的訊息視窗
          this.infowindow = infowindow;
        });
      });
    }
  }
};
See the gist on github.

export default {
  // 接收來自父元件的地圖設定資訊
  props: {
    center: {
      type: Object,
      default: () => ({ lat: 25.0325917, lng: 121.5624999 })
    },
    zoom: {
      type: Number,
      default: 14
    },
    streetViewControl: {
      type: Boolean,
      default: true
    },
    mapTypeControl: {
      type: Boolean,
      default: true
    },
    fullscreenControl: {
      type: Boolean,
      default: true
    },
    zoomControl: {
      type: Boolean,
      default: true
    },
    restaurants: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      map: null,
      infowindow: null,
      markers: []
    };
  },
  // 當發現中心位置改變時，更新中心位置與地標
  watch: {
    center(val) {
      this.resetCenter();
      this.setMarker();
    }
  },
  mounted() {
    this.initMap();
    this.setMarker();
  },
  methods: {
    initMap() {
      this.map = new google.maps.Map(document.getElementById("map"), {
        center: this.center,
        zoom: this.zoom,
        maxZoom: 20,
        minZoom: 3,
        streetViewControl: this.streetViewControl,
        mapTypeControl: this.mapTypeControl,
        fullscreenControl: this.fullscreenControl,
        zoomControl: this.zoomControl
      });
    },
    resetCenter() {
      // set center
      this.map.panTo({ lat: this.center.lat, lng: this.center.lng });
    },
    clearMarkers() {
      this.markers.forEach(marker => marker.setMap(null));
      this.markers = [];
    },
    setMarker() {
      // clear existing markers
      this.clearMarkers();
      this.restaurants.forEach(location => {
        const marker = new google.maps.Marker({
          position: { lat: location.lat, lng: location.lng },
          map: this.map
        });
        // save markers
        this.markers.push(marker);
        const infowindow = new google.maps.InfoWindow({
          content: `
          

            
${location.name}

          

        `,
          maxWidth: 200
        });
        marker.addListener("click", () => {
          if (this.infowindow) this.infowindow.close();
          infowindow.open(this.map, marker);
          this.infowindow = infowindow;
        });
      });
    }
  }
};

// 載入 GMap Component
import GMap from "../components/GMap";
export default {
  components: {
    GMap
  },
  data() {
    return {
      lat: 25.0325917,
      lng: 121.5624999,
      restaurants: []
    };
  },
  // 其他程式碼
};




.google-map {
  width: 100%;
  height: 400px;
}
/*其他樣式設定*/