google-map-api

google-map-api-custom-marker.js

const googleMap = new Vue({
  el: '#app',
  data: {
    map: null
  },
  methods: {
    // init google map
    initMap() {

      // 預設顯示的地點：台北市政府親子劇場
      let location = {
        lat: 25.0374865, // 經度
        lng: 121.5647688 // 緯度
      };

      // 建立地圖
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: location,
        zoom: 16,
        mapTypeId: 'terrain'
      });

      // 放置多個marker
      fetch('./map.geojson')
        .then(results => results.json())
        .then(result => {
          let res = result.features;
          Array.prototype.forEach.call(res, r => {
            let latLng = new google.maps.LatLng(r.geometry.coordinates[0], r.geometry.coordinates[1]);
            let marker = new google.maps.Marker({
              position: latLng,
              icon: "https://akveo.github.io/eva-icons/outline/png/128/gift-outline.png", // 自定義圖標，google也有提供5個預設的圖標，參考下方*1
              map: this.map
            });

            /* *1 用google預設圖標的寫法
              let marker = new google.maps.Marker({
                icon: {
                  // icon圖例：https://developers.google.com/maps/documentation/javascript/symbols?hl=zh-tw#predefined
                  // google.maps.SymbolPath.CIRCLE
                  // google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
                  // google.maps.SymbolPath.FORWARD_CLOSED_ARROW
                  // google.maps.SymbolPath.BACKWARD_OPEN_ARROW
                  // google.maps.SymbolPath.FORWARD_OPEN_ARROW
                  path: google.maps.SymbolPath.CIRCLE,
                  scale: 10
                }
              });
            */

          });
      });

    }
  },
  created() {
    window.addEventListener('load', () => {
      this.initMap();
    });
  }
});