Clicking markers navigates to google maps

client/src/components/screens/RoundSummary.jsx

@@ -8,6 +8,10 @@ import question from "../../assets/question-mark.svg";
 
 // TODO eventually we want this to query and show other players
 
+const openMapInNewTab = ({ lat, lng }) => {
+  window.open(`https://www.google.com/maps?hl=en&q=+${lat},+${lng}`, "_blank");
+}
+
 const useMarkedPoints = (mapRef, selectedPoint, targetPoint) => {
   useEffect(() => {
     mapRef.current.panTo(targetPoint);
@@ -17,6 +21,7 @@ const useMarkedPoints = (mapRef, selectedPoint, targetPoint) => {
       map: mapRef.current,
       position: selectedPoint,
       title: "Selected",
+      clickable: true,
       icon: {
         url: question,
         scaledSize: new google.maps.Size(64, 64),
@@ -25,10 +30,13 @@ const useMarkedPoints = (mapRef, selectedPoint, targetPoint) => {
       },
     });
 
+    selectedMarker.addListener('click', () => openMapInNewTab(selectedPoint));
+
     const targetMarker = new google.maps.Marker({ 
       map: mapRef.current,
       position: targetPoint,
       title: "Goal",
+      clickable: true,
       icon: {
         url: flag,
         scaledSize: new google.maps.Size(32, 32),
@@ -37,6 +45,8 @@ const useMarkedPoints = (mapRef, selectedPoint, targetPoint) => {
       },
     });
 
+    targetMarker.addListener('click', () => openMapInNewTab(targetPoint));
+
     const line = new google.maps.Polyline({
       path: [ selectedPoint, targetPoint ],
       strokeColor: "#333333",