Question 419116 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Google Maps React Component Crashes with TrafficLayer: "Uncaught Error: b/369845599"

I’m using the @react-google-maps/api library to render a Google Map in my React app. The map displays markers for couriers and shows directions for selected couriers. I also want to include a TrafficLayer for live traffic updates. However, when I add the TrafficLayer component, my application crashes with the following error:

main.js:152 Uncaught Error: b/369845599
Script error.
    at handleError (http://localhost:5173/static/js/bundle.js:61314:58)
    at http://localhost:5173/static/js/bundle.js:61333:7

If I comment out the TrafficLayer component, everything works fine. Here’s my code:

<GoogleMap mapContainerStyle={mapContainerStyle} zoom={12} center={defaultCenter}>
  {couriers.map((courier) => (
    <Marker
      key={courier.courier_id}
      position={{
        lat: parseFloat(courier.latitude),
        lng: parseFloat(courier.longitude),
      }}
      label={`${courier.courier_id}`}
      onClick={() => handleCourierClick(courier)}
    />
  ))}
  {selectedCourier && directions[selectedCourier.courier_id] && (
    <DirectionsRenderer
      options={{
        directions: directions[selectedCourier.courier_id],
      }}
    />
  )}
  {showTrafficLayer && <TrafficLayer />}
</GoogleMap>

What I’ve Tried:

  1. If I comment out the <TrafficLayer /> component, everything works fine.
  2. Checked my Google Maps API key for proper setup (enabled all required services like Directions API, Maps JavaScript API, Traffic).
  3. Confirmed that the error consistently occurs only when TrafficLayer is included.
    Question:
    What could be causing the TrafficLayer to crash the app with this error? Are there specific prerequisites or configurations needed for TrafficLayer to work? Any suggestions or fixes would be greatly appreciated.
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Yes, I managed to fix it by changing the API version. I'm using the loader in React, and now my code looks like this:

    const { isLoaded } = useJsApiLoader({
  googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  version: "3.58",
});

  2. 0

    What worked for me is pinning the version of Google Maps API to the previous working one, in this case v3.58.11a. So I’m not sure how you’re instantiating it, but if you’re using a <script> tag, for example:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&v=3.58.11a"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search