Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

123
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda