Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

128
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda