Switch to Mapkit: HTML/CSS/JS

I have a google map JS code on html which I use in an iFrame on the no-code platform bubble.io. The map code has routing with origin and destination markers. The markers have info windows on each of them. The coordinates of the markers are fed from the database in bubble and this is periodically updated at intervals straight from the bubble database. Each time the lat and long figures in the database is updated, the map is automatically updated to reflect the new position of the marker(s) and the routing. However this update causes the map to refresh/reload. See below, my requirements; 1 . When the coordinates data is updated at intervals, can the marker position and routing be automatically updated (like animation) without refreshing or reloading the map? (This will simply show the movement of the marker instead of blinking the entire map. ) 2 . Can the travel duration between the two location be displayed in the destination marker info window alongside the marker location address. (Similar to the attached picture). This will also be automatically updated alongside the marker position. 3 . Ensure that when the map is loaded and route is drawn, the may zoom automatically adjusts to accommodate all markers and info windows within the map with max dimensions of 320px wide and 300 pix high. 4 . Write the code in Apple MapsJS or any other cheaper alternative to google. (i.e Mapbox or Leaflet) I believe applemaps is has a routing service as well? See attached the html code and the picture of similar map routing with estimated travel duration.