Google Maps APIを使って複数のマーカーを表示したい。

Question

実現したいこと

Google Maps APIを使って複数のマーカーを表示したい。

発生している問題・分からないこと

Laravelで食べログ風アプリを作成しています。
Google Maps APIを使用して、地図上に複数のマーカーを表示したいのですが、
１つしか表示されていない状況です。
解決方法がわかる方がいらっしゃいましたら、教えていただけますと幸いです。

該当のソースコード

// viewファイルよりお気に入り店舗の情報を取得している
var markerData = Laravel.favorite_shops;
var marker =[];

// googleMapsAPIを持ってくるときに,callback=initMapと記述しているため、initMap関数を作成
async function initMap() {

  // welcome.blade.phpで描画領域を設定するときに、id=mapとしたため、その領域を取得し、mapに格納します。
  map = document.getElementById("map");

  async function setLocation(pos) {

    // 現在の緯度・経度を取得
    const currentLat = pos.coords.latitude;
    const currentLng = pos.coords.longitude;

    // 現在の緯度経度を代入
    let currentLocation = { lat: currentLat, lng: currentLng };

    var marker = new Array();
    // 複数のピンを作成する
    for (var i = 0; i < markerData.length; i++) {

      var place = markerData[i]['name'];

      const geocoder = new google.maps.Geocoder(); // Googlgのサーバーと通信するためのインスタンスを生成
      geocoder.geocode(
        {
          address: markerData[i]['address'], // 住所から緯度経度に変換
          region: "jp",
        },
        async function (results, status) {
      
          if (status == google.maps.GeocoderStatus.OK) {

            // 取得が成功した場合
            // 結果をループして取得します。
            for (var i in results) {
              if (results[i].geometry) {

                // 緯度を取得します。
                var lat = results[i].geometry.location.lat();
                // 経度を取得します。
                var lng = results[i].geometry.location.lng();

                map = document.getElementById("map");
                
                // オプションを設定
                opt = {
                  zoom: 11, //地図の縮尺を指定
                  center: currentLocation, //センターを取得した緯度経度に指定
                };
                
                // 地図のインスタンスを作成します。第一引数にはマップを描画する領域、第二引数にはオプションを指定
                mapObj = new google.maps.Map(map, opt);

                var markerLatLng = new google.maps.LatLng({lat: lat, lng: lng}); // 緯度経度のデータ作成  

                marker[i] = new google.maps.Marker({
                  // ピンを差す位置を決めます。
                  position: markerLatLng,
                  // ピンを差すマップを決めます。
                  map: mapObj,
                  
                });

                // marker[i]をコンソールで確認したが、正しい緯度経度が取得できている。
                console.log(marker[i]);

                // そもそも、ループを回して、検索結果にあっているものをiに入れていっているため
                // 精度の低いものもでてきてしまう。その必要はないから、一回でbreak
                break;
              }
              
            }
          } else if (status == google.maps.GeocoderStatus.ERROR) {
            alert("サーバ接続に失敗しました。");
          } else if (status == google.maps.GeocoderStatus.INVALID_REQUEST) {
            alert("リクエストが無効でした。");
          } else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            alert("リクエストの制限回数を超えました。");
          } else if (status == google.maps.GeocoderStatus.REQUEST_DENIED) {
            alert("サービスが使えない状態でした。");
          } else if (status == google.maps.GeocoderStatus.UNKNOWN_ERROR) {
            alert("原因不明のエラーが発生しました。");
          }
        }
      );
    }
  }

  // エラー時に呼び出される関数
  function showErr(err) {
    switch (err.code) {
      case 1:
        alert("位置情報の利用が許可されていません");
        break;
      case 2:
        alert("デバイスの位置が判定できません");
        break;
      case 3:
        alert("タイムアウトしました");
        break;
      default:
        alert(err.message);
    }
  }

  // geolocation に対応しているか否かを確認
  if ("geolocation" in navigator) {
    var opt = {
      "enableHighAccuracy": true,
      "timeout": 10000,
      "maximumAge": 0,
    };
    navigator.geolocation.getCurrentPosition(setLocation, showErr, opt);
  } else {
    alert("ブラウザが位置情報取得に対応していません");
  }

}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

var marker[i] の中身をコンソールで確認した。
→緯度経度は正しく取得できている。

さまざまなサイトを参考にし、解決しようと試みましたが、
なかなか上手くいきませんでした。

補足

Answer 1

mapObj = new google.maps.Map(map, opt); を for (var i in results) { より前に置きましょう。

Comments

[naoki00810]

ご回答ありがとうございました。
試してましたが上手く動作しませんでした。
他になにか原因は考えられますでしょうか？

[kei344]

> 上手く動作しませんでした
・Mapが表示されない
・マーカーが表示されない
・マーカーが1つしか表示されない
・エラーが出る
提示されたコードは同じ要素に対してMapの生成を繰り返すコードだったので、それが解消されるだけでも問題の出方は変わると思うのですが、どのような状況でしょうか。

＞他になにか原因は考えられますでしょうか？
「alert()」が他処理を意図と違う形で止める可能性があるので、デバッグ目的であれば「console.log()」を使うほうが良いとは思います。

[naoki00810]

マーカーが1つしか表示されない状況で、エラーは出ておりません。
また、ご指摘の通り「alert()」を「console.log」に変更しましたが、上記と同じ状況です。

[kei344]

すみませんコードを読み違えていました、
for (var i = 0; i < markerData.length; i++) {
より前に移動してください。

また、「var i」が2回あり同じ変数名を使うと混乱の元なのでこのケースの場合変えたほうが良いと思います。