|
@@ -36,7 +36,7 @@ const openMapInNewTab = ({ lat, lng }) => {
|
|
|
}
|
|
|
|
|
|
const makeMarker = (map, position, title, icon) => {
|
|
|
- const marker = new google.maps.Marker({
|
|
|
+ const marker = new google.maps.Marker({
|
|
|
clickable: true,
|
|
|
map,
|
|
|
position,
|
|
@@ -51,19 +51,27 @@ const makeMarker = (map, position, title, icon) => {
|
|
|
|
|
|
export default (mapRef, selectedPoint, targetPoint) => {
|
|
|
useEffect(() => {
|
|
|
- const selectedMarker = makeMarker(mapRef.current, selectedPoint, "Selected", questionIcon);
|
|
|
+ const selectedMarker = selectedPoint
|
|
|
+ ? makeMarker(mapRef.current, selectedPoint, "Selected", questionIcon)
|
|
|
+ : null;
|
|
|
const targetMarker = makeMarker(mapRef.current, targetPoint, "Goal", flagIcon);
|
|
|
|
|
|
- const line = new google.maps.Polyline({
|
|
|
- path: [ selectedPoint, targetPoint ],
|
|
|
- map: mapRef.current,
|
|
|
- ...lineSettings,
|
|
|
- });
|
|
|
+ const line = selectedPoint
|
|
|
+ ? new google.maps.Polyline({
|
|
|
+ path: [ selectedPoint, targetPoint ],
|
|
|
+ map: mapRef.current,
|
|
|
+ ...lineSettings,
|
|
|
+ })
|
|
|
+ : null;
|
|
|
|
|
|
- return () => {
|
|
|
- line.setMap(null);
|
|
|
+ return () => {
|
|
|
+ if (line) {
|
|
|
+ line.setMap(null);
|
|
|
+ }
|
|
|
targetMarker.setMap(null);
|
|
|
- selectedMarker.setMap(null);
|
|
|
+ if (selectedMarker) {
|
|
|
+ selectedMarker.setMap(null);
|
|
|
+ }
|
|
|
}
|
|
|
}, [mapRef, selectedPoint, targetPoint]);
|
|
|
}
|