Estoy tratando de agregar marcadores para las ubicaciones de las paradas de autobús en una página de Google Maps usando react-google-maps, y tengo problemas para navegar por los datos de la matriz json para agregar marcadores para cada parada de autobús. Este es el código que tengo actualmente para agregar los marcadores.

 import React from "react"; import { GoogleMap, withScriptjs, withGoogleMap, Marker } from "react-google-maps"; import * as busStopData from "../../data/busstops.json"; function Map() { return ( <GoogleMap defaultZoom={10} defaultCenter={{ lat:40.1020, lng:-88.2272 }} > {busStopData.map((busStop) => ( <Marker key = {busStop.stop_id} position = {{ lat:busStop.stop_points[0].stop_lat, lng:busStop.stop_points[0].stop_lon }}/> ))} </GoogleMap> ); }

El busStopData debe ser una matriz de objetos json formateados así

 [ { "stop_id":"150DALE", "stop_name":"US 150 and Dale", "code":"MTD5437", "distance":15795.93, "stop_points":[ { "code":"MTD5437", "stop_id":"150DALE:1", "stop_lat":40.114512, "stop_lon":-88.180673, "stop_name":"US 150 & Dale (NE Corner)" }, { "code":"MTD5437", "stop_id":"150DALE:3", "stop_lat":40.114503, "stop_lon":-88.180848, "stop_name":"US 150 & Dale (South Side)" } ] }, { "stop_id":"150DOD", "stop_name":"US 150 and Dodson Dr.", "code":"MTD2634", "distance":17911.96, "stop_points":[ { "code":"MTD2634", "stop_id":"150DOD:5", "stop_lat":40.114158, "stop_lon":-88.173105, "stop_name":"US 150 & Dodson (NE Far Side)" } ] } ]

En el caso de múltiples puntos de parada, planeo usar solo el primer punto de parada como se muestra en mi código. El error que recibo al ejecutar el código se muestra como

 Compiled with problems: ERROR in ./src/views/Map/Map.js 16:14-29 export 'map' (imported as 'busStopData') was not found in '../../data/busstops.json' (possible exports: 0, 1, 10, ...