diff --git a/src/frontend/src/Components/map/Map.js b/src/frontend/src/Components/map/Map.js
index f484a9df5..91268d35d 100644
--- a/src/frontend/src/Components/map/Map.js
+++ b/src/frontend/src/Components/map/Map.js
@@ -959,7 +959,7 @@ export default function DriveBCMap(props) {
       }
 
       {searchedRoutes && searchedRoutes.length > 0 &&
-        <DistanceLabels updateRouteDisplay={updateRouteDisplay} mapRef={mapRef} isCamDetail={isCamDetail} />
+        <DistanceLabels updateRouteDisplay={updateRouteDisplay} mapRef={mapRef} isCamDetail={isCamDetail} mapRendered={mapRendered} />
       }
 
       {!!openPanel && largeScreen &&
diff --git a/src/frontend/src/Components/routing/DistanceLabels.js b/src/frontend/src/Components/routing/DistanceLabels.js
index ac0e2dc4d..2cd5d2cf4 100644
--- a/src/frontend/src/Components/routing/DistanceLabels.js
+++ b/src/frontend/src/Components/routing/DistanceLabels.js
@@ -20,7 +20,7 @@ import distance from "@turf/distance";
 // Styling
 import './DistanceLabels.scss';
 
-export default function DistanceLabels({ updateRouteDisplay, mapRef, isCamDetail }) {
+export default function DistanceLabels({ updateRouteDisplay, mapRef, isCamDetail, mapRendered }) {
   /* initialization */
 
   // Redux
@@ -36,13 +36,13 @@ export default function DistanceLabels({ updateRouteDisplay, mapRef, isCamDetail
 
   /* useEffect hooks */
   useEffect(() => {
-    if (!mapRef || !mapRef.current) {
+    if (!mapRef || !mapRef.current || !mapRendered) {
       return;
     }
 
     addDistanceOverlay();
     updateRouteDisplay(selectedRoute);
-  }, [selectedRoute]);
+  }, [selectedRoute, mapRendered]);
 
   /* Rendering */
   // Threshold of 500 meters in distance by default