CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsreact-google-maps-api
CreazyBoyxD
CreazyBoyxD

Reputation: 133

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.

Upvotes: 8

Views: 384

Answers (2)

CreazyBoyxD
CreazyBoyxD

Reputation: 133

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",
});

Upvotes: 5

M. Aho
M. Aho

Reputation: 343

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>

Upvotes: 1

Related Questions