Estou buscando fazer uma espécie de animação estilo toFly do Mapbox. Igual a este exemplo:
https://docs.mapbox.com/mapbox-gl-js/example/flyto/
então criei isto:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
#bot_voar{
position: absolute;
top: 20px;
left: 230px;
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?key=SUA_API_AQUI&callback=initMap&libraries=&v=weekly"
async
></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<input id="bot_voar" type="button" value="VOAR" onclick="voar()"/>
<!--The div element for the map -->
<div id="map"></div>
<script>
var map;
var rio;
var sp;
var decision;
// Initialize and add the map
function initMap() {
rio = { lat: -22.90554618521199, lng: -43.18172352094501 };
sp = { lat: -23.55054775343919, lng: -46.63329758032604 };
// The map, centered at Uluru
map = new google.maps.Map(document.getElementById("map", {
zoom: 15,
center: rio,
});
decision = true;
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: rio,
map: map,
});
const marker2 = new google.maps.Marker({
position: sp,
map: map,
});
}
function voar(){
if(decision == true){
decision = false;
map.panTo(sp);
}else{
decision = true;
map.panTo(rio);
}
}
</script>
</body>
</html>não faço ideia de como fazer. Alguem pode me ajudar a fazer animaçao de voar ate la?
