Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

127
Views
ReactJS Google Maps adding multiple markers from json array

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, ...
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!