javascript内で定義した関数が実行できない

前提・実現したいこと

gesture.js内のmain関数から得られた変数moveの値に応じて，map.js内のmove関数を実行したい.

javascript
1//gesture.js
2let move;
3
4async function main(){
5while (true) {
6//機械学習による処理
7move = hogehoge; //up,down,left,rightがそれぞれmoveに代入される
8}
9//ここにconsole.log(move)をいれても何も表示されない
10}
11
12main();

javascript
1//map.js
2let map;
3
4function initMap(){
5map = new google.maps.Map({}); //google mapの初期化
6}
7
8//move=upのときmove_upを実行させたい
9function move_up(){
10map.panBy(); //move_upを実行
11}
12//...同様にmove_down,left,rightを定義

発生している問題について

問題①：
scriptタグ内でmap.jsのmove関数を実行(例：move_up();)しようとすると以下のようなエラーがでてしまいます．
[Uncaught TypeError: Cannot read properties of undefined (reading 'panBy')]
しかし，html内で<input type="button" onclick="move_up()" />と記述してクリックした場合はちゃんと動きます．
なお，move関数の実行は変数moveの値に応じてリアルタイムに(連続的に)実行させたいと考えています．

問題②：
また，gesture.jsにおいて処理を連続でおこなうためmain関数内にwhileのループを入れ変数moveを取得しているのですが(プログラム起動中は無限に)，そのmoveがwhileの外から参照できません．while文の中にconsole.log(move)とおけば表示されるのですが，外においた場合コンソール画面に何もでません(undefinedなどもでません)．

質問が重なり申し訳ありませんが，この２つを解決するのに何かいい方法はありませんでしょうか．
よろしくお願いいたします．

追記

main関数内のwhile文内は以下のようなコードです。

javascript
1let results = await new Promise(resolve => {
2hands.onResults(resolve);
3});
4let landmark;
5if (results.multiHandLandmarks) { for (const landmarks of results.multiHandLandmarks) { landmark = landmarks;
6}
7}
8
9