動態化座標
繪製地圖

動態顯示單一座標


      var map1 = new google.maps.Map(document.getElementById('map1'), {
        zoom: 13,
        center: {lat: 59.325, lng: 18.070},
        clickableIcons: false,
        gestureHandling: 'greedy',
        disableDefaultUI: true,
      });
      var marker1 = new google.maps.Marker({
        map: map2,
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: {lat: 59.327, lng: 18.067},
      });

      marker1.addListener('click', function() {
        if (this.getAnimation() !== null) {
          this.setAnimation(null);
        } else {
          this.setAnimation(google.maps.Animation.BOUNCE);
        }
      });
      

動態顯示多個座標


      var $neighborhoods = [
        {lat: 52.511, lng: 13.447},
        {lat: 52.549, lng: 13.422},
        {lat: 52.497, lng: 13.396},
        {lat: 52.517, lng: 13.394}
      ];
      var $markers = [];
      var $map2;

      function initMap() {
        $map2 = new google.maps.Map(document.getElementById('map2'), {
          zoom: 12,
          center: {lat: 52.520, lng: 13.410},
          clickableIcons: false,
          gestureHandling: 'greedy',
          disableDefaultUI: true,
        });
      }
      //點擊執行此function
      function drop() {
        //若已有值初始需清掉
        if ( $markers.length > 0 ) {
          for (var i = 0; i < $markers.length; i++) {
            $markers[i].setMap(null);
          }
          $markers = [];
        }
        for ( var i = 0; i < $neighborhoods.length; i++ ) {
          //此timeout必須使用function呼叫回傳,否則無法等待時間結束後才執行下個動作
          addMarkerWithTimeout($neighborhoods[i], i * 200);
        }
      }

      function addMarkerWithTimeout(position, timeout) {
        window.setTimeout(function() {
          var marker = new google.maps.Marker({
            position: position,
            map: $map2,
            animation: google.maps.Animation.DROP
          });
          addAnimationBounce(marker);
          $markers.push(marker);
        }, timeout);
      }

      function addAnimationBounce(marker) {
        marker.addListener('click', function() {
          if (this.getAnimation() !== null) {
            this.setAnimation(null);
          } else {
            this.setAnimation(google.maps.Animation.BOUNCE);
          }
        });
      }