I'm trying to add markers for bus stop locations onto a google maps page using react-google-maps, and am having trouble navigating the json array data to add markers for each bus stop. This is the code I currently have to add the markers
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>
);
}
The busStopData should be an array of json objects formatted like so
[
{
"stop_id":"150DALE",
"stop_name":"U.S. 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":"U.S. 150 & Dale (NE Corner)"
},
{
"code":"MTD5437",
"stop_id":"150DALE:3",
"stop_lat":40.114503,
"stop_lon":-88.180848,
"stop_name":"U.S. 150 & Dale (South Side)"
}
]
},
{
"stop_id":"150DOD",
"stop_name":"U.S. 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":"U.S. 150 & Dodson (NE Far Side)"
}
]
}
]
In the case of multiple stop points, I plan on using only the first stop point as shown in my code. The error I get when running the code displays as
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, ...