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:
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>