google-map-api

google-map-api-night-mode.js

const googleMap = new Vue({
  el: '#app',
  data: {
    map: null,
    nightMode: 'close', // 夜間模式：open開啟
    // 夜間模式的styles，資料來源：https://developers.google.com/maps/documentation/javascript/styling?hl=zh-tw
    nightModeStyles: [
      { elementType: 'geometry', stylers: [{color: '#242f3e'}] },
      { elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}] },
      { elementType: 'labels.text.fill', stylers: [{color: '#746855'}] },
      {
        featureType: 'administrative.locality',
        elementType: 'labels.text.fill',
        stylers: [{color: '#d59563'}]
      },
      {
        featureType: 'poi',
        elementType: 'labels.text.fill',
        stylers: [{color: '#d59563'}]
      },
      {
        featureType: 'poi.park',
        elementType: 'geometry',
        stylers: [{color: '#263c3f'}]
      },
      {
        featureType: 'poi.park',
        elementType: 'labels.text.fill',
        stylers: [{color: '#6b9a76'}]
      },
      {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [{color: '#38414e'}]
      },
      {
        featureType: 'road',
        elementType: 'geometry.stroke',
        stylers: [{color: '#212a37'}]
      },
      {
        featureType: 'road',
        elementType: 'labels.text.fill',
        stylers: [{color: '#9ca5b3'}]
      },
      {
        featureType: 'road.highway',
        elementType: 'geometry',
        stylers: [{color: '#746855'}]
      },
      {
        featureType: 'road.highway',
        elementType: 'geometry.stroke',
        stylers: [{color: '#1f2835'}]
      },
      {
        featureType: 'road.highway',
        elementType: 'labels.text.fill',
        stylers: [{color: '#f3d19c'}]
      },
      {
        featureType: 'transit',
        elementType: 'geometry',
        stylers: [{color: '#2f3948'}]
      },
      {
        featureType: 'transit.station',
        elementType: 'labels.text.fill',
        stylers: [{color: '#d59563'}]
      },
      {
        featureType: 'water',
        elementType: 'geometry',
        stylers: [{color: '#17263c'}]
      },
      {
        featureType: 'water',
        elementType: 'labels.text.fill',
        stylers: [{color: '#515c6d'}]
      },
      {
        featureType: 'water',
        elementType: 'labels.text.stroke',
        stylers: [{color: '#17263c'}]
      }
    ]
  },
  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 => {
          this.features = result.features;
          Array.prototype.forEach.call(this.features, r => {
            let latLng = new google.maps.LatLng(r.geometry.coordinates[0], r.geometry.coordinates[1]);
            let marker = new google.maps.Marker({
              position: latLng,
              map: this.map
            });
          });

      });

    }
  },
  created() {
    window.addEventListener('load', () => {
      this.initMap();
    });
  },
  watch: {
    // nightMode的值變動時，切換地圖的日間/夜間樣式
    nightMode: function(val) {
      if(val == 'open') {
        this.map.setOptions({
          styles: this.nightModeStyles
        });
      }
      else {
        this.map.setOptions({
          styles: null
        });
      }
    }
  }
});