Google Maps Javascript API 表示範囲の取得方法(bounds_changedやidle以外の方法)

Question

やりたいこと

Google Maps Javascript APIを使用し、GoogleMapsを表示する。
GoogleMapsに表示されている表示範囲のmin_lat(最小の緯度)、min_lng(最小の経度)、max_lat(最大の緯度)、max_lng(最大の経度)を取得する。
取得した表示範囲をWebAPIにリクエストを投げてデータをもらう。

困っていること

Google Maps Javascript APIを使用して、GoogleMapsの表示はできました。
表示範囲の取得も以下のソースコードにより取得ができました。
しかし、表示範囲を取得する順序がWebAPIにリクエストを投げるより遅いため、
WebAPIに表示範囲を投げることができません。

ここでは、addListenerを使用して「bounds_changed」や「idle」で取得しているのですが、
どちらも変化が終わった後の取得になるため
WebAPIにリクエストを投げるほうが先に実行されてしまいます。
何か方法はございませんでしょうか。

また、質問の仕方がわかりにくかったり不備や不足などございましたら
お気軽にご指摘頂けますと幸いです。

ソースコード

var map;
center_lat = 35.681224;
center_lng = 139.767082;
var center;
var zoon_level;

// GoogleMapsの表示範囲
var bounds;
var map_ne_lat;
var map_ne_lng;
var map_sw_lat;
var map_sw_lng;

var request;
var data;



function initMap() {
    // 別途index.htmlの方に <div id="map"></div>及び
    // <script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=API KEY" async defer></script>を記載しております。ここでは、index.htmlのファイルの記載は割愛させていただきます。
    var target = document.getElementById('map');

    map = new google.maps.Map(target, {
      // 中心点
      center: center,
      // ズームレベル
      zoom: zoom_level
    });

    // 表示された範囲を取得(小数点6桁まで表示)
    google.maps.event.addListener(map, "idle", function () {
      bounds = map.getBounds();
      map_ne_lat = Math.round(bounds.getNorthEast().lat() * 1000000) / 1000000;
      map_ne_lng = Math.round(bounds.getNorthEast().lng() * 1000000) / 1000000;
      map_sw_lat = Math.round(bounds.getSouthWest().lat() * 1000000) / 1000000;
      map_sw_lng = Math.round(bounds.getSouthWest().lng() * 1000000) / 1000000;
      console.log('現在表示されている北東の緯度' + map_ne_lat);
      console.log('現在表示されている北東の経度' + map_ne_lng);
      console.log('現在表示されている南西の緯度' + map_sw_lat);
      console.log('現在表示されている南西の経度' + map_sw_lng);
    }, { once: true });
  }

  initMap();

//ここからWebAPIにリクエストを投げるコード
  request = new XMLHttpRequest();
  
  //
  request.open('GET', `http://localhost:/hogehoge?minlat=${map_sw_lat}&minlng=${map_ne_lng}&maxlat=${map_sw_lat}&maxlng=${map_sw_lng}`, true);

  request.responseType = 'json';

  request.onload = function () {
    data = this.response;
    console.log('データを取得しました');
  };

  request.send();
};

以上、大変詰まってしまいました。。。

公式のこちらのリファレンスを参考にしております。
https://developers.google.com/maps/documentation/javascript/reference

何卒どうぞよろしくお願い致します。

Answer 1

//ここからWebAPIにリクエストを投げるコードから先をconsole.log('現在表示されている南西の経度' + map_sw_lng);の後に入れればよいです。

Comments

[nippa23]

kei344様
ご回答下さりどうもありがとうございます！
大変助かります！

もし、可能でしたらご教授頂けますと嬉しいのですが...
イベントのあるなしに関わらず(addListenerを使わず)、getBounds()で値を取ってくることは可能なのでしょうか。

お忙しいところ、申し訳ございませんが
何卒どうぞよろしくお願い申し上げます。

[kei344]

google.maps.event.addListener(map, "idle", function () {});の中身をinitMap関数内にそのまま出せばよいのでは。