JavaScriptで同期処理を行う方法

auです。

Google Mαpにマーカーを表示させるのですが、必要な情報はデータベースの方に置いてあります。

データベースから値を取得→マーカーを設置

という順番にしたかったのですが、最初はうまく行きませんでした。
先にマーカーを設置するコードが動いてしまっている状態ですね。

これを解消するには、同期処理を行う必要があります。

実際に書いてみる

DBからデータを読み込む関数と、マーカーを設置する関数を別々に宣言しています。head要素の中で記述しています。

やり方は色々あるようですが、最近は「async・await」を使うのがスマートらしいです。

// DBからデータを取得
// asyncを行頭に書く
async function readDB() {
    await dataDB() // データを取得する行にawaitを書く 
    return data;
}

// マーカーを設置
// asyncを行頭に書く
async function initMap() {
    let element = await readSpreadSheet(); // データを読み込む関数にawaitを書く
    // 緯度・経度を変数に格納
    var lat = parseFloat(element[0].lat);
    var lng = parseFloat(element[0].lng);
    var mapLatLng = new google.maps.LatLng(lat, lng);
    console.log(mapLatLng)
    // マップオプションを変数に格納
    var mapOptions = {
        zoom : 15,          // 拡大倍率
        center : mapLatLng  // 緯度・経度
    };
    //マップオブジェクト作成
    var map = new google.maps.Map(
        document.getElementById("map"), // マップを表示する要素
        mapOptions         // マップオプション
    );
    //　マップにマーカーを表示する
    var marker = new google.maps.Marker({
        map : map,             // 対象の地図オブジェクト
        position : mapLatLng   // 緯度・経度
    });
}

念のためGoogle Maps APIの部分も記述しておきます。bodyの一番下に記述しています。

<script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key={ Your API}&callback=initMap" async defer></script>

参考

qiita.com