Fixed lat lng NaN, fixed proptypes

src/components/Map/Map.js

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
 import PropTypes from 'prop-types';
 import { showAllMarkers } from './utils/utils';
-import MarkerDrawer from './components/MarkersDrawer';
+import MarkersDrawer from './components/MarkersDrawer';
 import SearchBox from './components/SearchBox';
 import { LIBRARIES, INITIAL_CONTROLS_POSITION } from './utils/constants';
 import getMapOptions from './utils/getMapOptions';
@@ -78,10 +78,9 @@ const Map = ({
 			<>
 				{showSearchBar && <SearchBox className="search-box-component" />}
 				{validMarkersExist && (
-					<MarkerDrawer
+					<MarkersDrawer
 						markers={markers}
 						readOnly={readOnly}
-						//setMarker={setMarker}
 						saveRouteData={saveRouteData}
 						googleMapsApiKey={googleMapsApiKey}
 					/>

src/components/Map/components/MarkersDrawer/MarkersDrawer.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Locations from '../Locations';
 import Route from '../Route';
 
-const MarkerDrawer = ({ markers, readOnly, setMarker, saveRouteData, googleMapsApiKey }) => {
+const MarkersDrawer = ({ markers, readOnly, setMarker, saveRouteData, googleMapsApiKey }) => {
 	const commonProps = { readOnly, setMarker };
 	return (
 		<>
@@ -24,12 +24,29 @@ const MarkerDrawer = ({ markers, readOnly, setMarker, saveRouteData, googleMapsA
 	);
 };
 
-MarkerDrawer.propTypes = {
-	markers: PropTypes.arrayOf({}),
+MarkersDrawer.propTypes = {
+	markers: PropTypes.arrayOf(
+		PropTypes.shape({
+			drawRoute: PropTypes.bool,
+			points: PropTypes.arrayOf(
+				PropTypes.shape({
+					position: PropTypes.shape({ lat: PropTypes.number, lng: PropTypes.number }),
+					icon: PropTypes.object,
+					overlay: PropTypes.element,
+					infoWindowChildren: PropTypes.element
+				})
+			),
+			polylineOptions: PropTypes.shape({
+				strokeColor: PropTypes.string,
+				strokeOpacity: PropTypes.number,
+				strokeWeight: PropTypes.number
+			})
+		})
+	),
 	readOnly: PropTypes.bool,
 	setMarker: PropTypes.func,
 	saveRouteData: PropTypes.func,
 	googleMapsApiKey: PropTypes.string
 };
 
-export default MarkerDrawer;
+export default MarkersDrawer;

src/components/Map/utils/utils.js

@@ -165,6 +165,7 @@ export const showAllMarkers = (map, markers, centerCoordinate) => {
 	if (!markers.length) return;
 	const markersFlatted = markers.flatMap((marker) => marker.points.map((point) => point.position));
 	map.fitBounds(getBounds(markersFlatted));
+	if (!centerCoordinate || isNaN(centerCoordinate).lat || isNaN(centerCoordinate.lng)) return;
 	map.setCenter(centerCoordinate);
 
 	return null;