Integrate Google Maps provider: update map components to use Google Maps, add API key configuration in app.json, and ensure consistent map rendering across screens.

app.json

@@ -16,6 +16,9 @@
       "supportsTablet": true,
       "infoPlist": {
         "NSLocationWhenInUseUsageDescription": "This app needs your location for the treasure hunt."
+      },
+      "config": {
+        "googleMapsApiKey": "AIzaSyA-G0tSzzcM5z6HyI23s8dzKDLCOrekhbw"
       }
     },
     "android": {
@@ -41,6 +44,14 @@
       "eas": {
         "projectId": "c65a2849-f05d-48ef-9e36-950caa214a7d"
       }
-    }
+    },
+    "plugins": [
+      [
+        "react-native-maps",
+        {
+          "googleMapsApiKey": "AIzaSyA-G0tSzzcM5z6HyI23s8dzKDLCOrekhbw"
+        }
+      ]
+    ]
   }
 }

src/components/gameplay/PlayerMapView.js

@@ -18,6 +18,7 @@ const PlayerMapView = ({userLocation, visibleCaches, heading, claimDistance}) =>
     return (
         <MapView
             style={{flex: 1}}
+            provider="google"
             initialRegion={{...userLocation, latitudeDelta: 0.01, longitudeDelta: 0.01}}
             scrollEnabled={true}
             zoomEnabled={true}

src/components/screens/ExpandedMapScreen.js

@@ -82,6 +82,7 @@ const ExpandedMapScreen = ({route}) => {
             <View style={styles.mapWrap}>
                 <MapView
                     style={{flex: 1}}
+                    provider="google"
                     initialRegion={region}
                     showsUserLocation
                 >

src/components/screens/MapScreen.js

@@ -342,6 +342,7 @@ const MapScreen = ({navigation}) => {
                 <View style={styles.mapWrap}>
                     <MapView
                         style={{flex: 1}}
+                        provider="google"
                         initialRegion={newCoord ? {...newCoord, latitudeDelta: 0.01, longitudeDelta: 0.01} : mapRegion}
                         scrollEnabled={true}
                         zoomEnabled={true}
@@ -443,6 +444,7 @@ const MapScreen = ({navigation}) => {
                 <View style={styles.mapContainer}>
                     <MapView
                         style={{flex: 1}}
+                        provider="google"
                         initialRegion={mapRegion}
                         scrollEnabled={true}
                         zoomEnabled={true}