やりたいこと

GoogleMapと地図のMarker一覧を取得するAPIを組み合わせて、Reactアプリケーションを作ることを想定しています。
その際に、地図の中心地がドラッグで移動された際に、Marker一覧も取得し直して、地図にMarkerの再配置をしたいです。
イメージとしてはドラッグ前が以下のような感じとした場合、

ドラッグ後はこのような感じでMarkerも再取得される感じです。

前提

地図用のライブラリとして、google-maps-reactを使います。詳細はReact.js内でGoogle Mapの現在地を表示するを参照ください。
実装は、React Hooksの形式でstateの管理は【React Hooks】useReducer + useContextでグローバルなストアを扱うを参考にしています。

サンプルソース

※ reducerやstoreの実装内容は割愛

GoogleMapComponent.js

import React, { useContext } from "react";
import { GoogleApiWrapper, Marker, Map } from "google-maps-react";
import { MapStore } from "../../store/MapStore";

export const GoogleMapComponent = ({ google }) => {
  const { state, dispatch } = useContext(MapStore);
  const location = state.currentLocation;
  var markerList = [];
  // ステートの情報でMarkerを作成
  state.markerList.map((m, i) => {
    return markerList.push(
      <Marker
        key={i}
        title={m.name}
        position={{ lat: m.latitude, lng: m.longitude }}
      />
    );
  });
  // 地図ドラッグ時に走る関数
  const centerMoved = (_, map) => {
    // 変更後の中心を取得
    const center = map.getCenter();
    // APIでのMarker取得処理
    axios
      .get("http://localhost/test", {
        latitude: center.lat(),
        longitude: center.lng(),
      })
      .then((results) => {
        if (results.status === 200) {
          dispatch({
            type: "CHANGE_LOCATION",
            currentLocation: {
              latitude: latitude,
              longitude: longitude,
            },
            markerList: results.data,
          });
        } else {
          // エラー時の処理
        }
      })
      .catch(() => {
        // エラー時の処理
      });
  };
  return (
    <Map
      google={google}
      zoom={15}
      center={{ lat: location.latitude, lng: location.longitude }}
      initialCenter={{ lat: location.latitude, lng: location.longitude }}
      onDragend={centerMoved}
    >
      {markerList}
    </Map>
  );
};

export default GoogleApiWrapper({
  apiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY,
})(GoogleMapComponent);