Googleマップを変更してループでズームする

Question

私はマップを生成するためにgoogle maps apiを使用しています。 ズームが10秒になるまで5秒後にマップズームを1ずつ変更するJavaScriptループを作成できますか？

マップは静的なマップではないので、ズームを変更するにはページを更新するしかないと思いますが、これはループをリセットします。

var map = null; 
    function initialize() { 
     var myOptions = { 
      center: { 
       lat: 34.052234, 
       lng: -118.243685 
      }, 
      zoom: 1, 
      scale: 2, 
      disableDefaultUI: true, 
      // mapTypeId: 'roadmap' 
      mapTypeId: google.maps.MapTypeId.SATELLITE 
      }; 

      map = new google.maps.Map(document.getElementById("map"),myOptions); 
    } 

Answer 1

あなたはmap.setZoomを使用してJavaScriptから地図ズームレベルを変更することができます。

var timer = setInterval(function() { 
    map.setZoom(map.getZoom() + 1); 
    if (map.getZoom() == 10) 
    clearInterval(timer); 
}, 5000) 

proof of concept fiddle

コードスニペット：

var map = null; 
 

 
function initialize() { 
 
    var myOptions = { 
 
    center: { 
 
     lat: 34.052234, 
 
     lng: -118.243685 
 
    }, 
 
    zoom: 1, 
 
    scale: 2, 
 
    disableDefaultUI: true, 
 
    // mapTypeId: 'roadmap' 
 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 
 
    var timer = setInterval(function() { 
 
    map.setZoom(map.getZoom() + 1); 
 
    if (map.getZoom() == 10) 
 
     clearInterval(timer); 
 
    }, 5000) 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>