feat: support mapId

README.md

@@ -287,6 +287,7 @@ in an unbounded widget will cause the application to behave unexpectedly.
 // Permissions must have been granted by this point.
 
 <NavigationView
+    mapId="your-map-id-here" // Optional: Your map ID configured in Google Cloud Console
     androidStylingOptions={{
         primaryDayModeThemeColor: '#34eba8',
         headerDistanceValueTextColor: '#76b5c5',
@@ -310,6 +311,7 @@ You can also add a bare `MapView` that works as a normal map view without naviga
 
 ```tsx
 <MapView
+    mapId="your-map-id-here" // Optional: Your map ID configured in Google Cloud Console
     mapViewCallbacks={mapViewCallbacks}
     onMapViewControllerCreated={setMapViewController}
 />

android/build.gradle

@@ -82,6 +82,6 @@ dependencies {
   implementation "androidx.car.app:app:1.4.0"
   implementation "androidx.car.app:app-projected:1.4.0"
   implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
-  implementation "com.google.android.libraries.navigation:navigation:7.0.0"
+  implementation "com.google.android.libraries.navigation:navigation:7.1.0"
   api 'com.google.guava:guava:31.0.1-android'
 }

android/src/main/java/com/google/android/react/navsdk/CustomTypes.java

@@ -14,7 +14,7 @@
 package com.google.android.react.navsdk;
 
 public class CustomTypes {
-  public enum FragmentType {
+  public enum MapViewType {
     MAP,
     NAVIGATION
   }

android/src/main/java/com/google/android/react/navsdk/EnumTranslationUtil.java

@@ -89,11 +89,11 @@ public static int getMapTypeFromJsValue(int jsValue) {
     }
   }
 
-  public static CustomTypes.FragmentType getFragmentTypeFromJsValue(int jsValue) {
+  public static CustomTypes.MapViewType getMapViewTypeFromJsValue(int jsValue) {
     return switch (jsValue) {
-      case 0 -> CustomTypes.FragmentType.MAP;
-      case 1 -> CustomTypes.FragmentType.NAVIGATION;
-      default -> throw new IllegalStateException("Unexpected FragmentType value: " + jsValue);
+      case 0 -> CustomTypes.MapViewType.MAP;
+      case 1 -> CustomTypes.MapViewType.NAVIGATION;
+      default -> throw new IllegalStateException("Unexpected MapViewType value: " + jsValue);
     };
   }
 }

android/src/main/java/com/google/android/react/navsdk/IMapViewFragment.java

@@ -15,15 +15,10 @@
 
 import android.view.View;
 import com.google.android.gms.maps.GoogleMap;
-import com.google.android.libraries.navigation.StylingOptions;
 
 public interface IMapViewFragment {
   MapViewController getMapController();
 
-  void setStylingOptions(StylingOptions stylingOptions);
-
-  void applyStylingOptions();
-
   void setMapStyle(String url);
 
   GoogleMap getGoogleMap();

android/src/main/java/com/google/android/react/navsdk/INavViewFragment.java

@@ -13,6 +13,8 @@
  */
 package com.google.android.react.navsdk;
 
+import com.google.android.libraries.navigation.StylingOptions;
+
 public interface INavViewFragment extends IMapViewFragment {
   void setNavigationUiEnabled(boolean enableNavigationUi);
 
@@ -35,4 +37,8 @@ public interface INavViewFragment extends IMapViewFragment {
   void setNightModeOption(int jsValue);
 
   void setReportIncidentButtonEnabled(boolean enabled);
+
+  void setStylingOptions(StylingOptions stylingOptions);
+
+  void applyStylingOptions();
 }

android/src/main/java/com/google/android/react/navsdk/MapViewFragment.java

@@ -25,17 +25,14 @@
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.google.android.gms.maps.GoogleMap;
-import com.google.android.gms.maps.OnMapReadyCallback;
+import com.google.android.gms.maps.GoogleMapOptions;
 import com.google.android.gms.maps.SupportMapFragment;
 import com.google.android.gms.maps.model.Circle;
 import com.google.android.gms.maps.model.GroundOverlay;
 import com.google.android.gms.maps.model.LatLng;
 import com.google.android.gms.maps.model.Marker;
 import com.google.android.gms.maps.model.Polygon;
 import com.google.android.gms.maps.model.Polyline;
-import com.google.android.libraries.navigation.StylingOptions;
-import java.util.ArrayList;
-import java.util.List;
 
 /**
  * A fragment that displays a view with a Google Map using MapFragment. This fragment's lifecycle is
@@ -45,43 +42,45 @@
 public class MapViewFragment extends SupportMapFragment
     implements IMapViewFragment, INavigationViewCallback {
   private static final String TAG = "MapViewFragment";
+  private int viewTag; // React native view tag.
+  private ReactApplicationContext reactContext;
   private GoogleMap mGoogleMap;
   private MapViewController mMapViewController;
-  private StylingOptions mStylingOptions;
 
-  private List<Marker> markerList = new ArrayList<>();
-  private List<Polyline> polylineList = new ArrayList<>();
-  private List<Polygon> polygonList = new ArrayList<>();
-  private List<GroundOverlay> groundOverlayList = new ArrayList<>();
-  private List<Circle> circleList = new ArrayList<>();
-  private int viewTag; // React native view tag.
-  private ReactApplicationContext reactContext;
+  public static MapViewFragment newInstance(
+      ReactApplicationContext reactContext, int viewTag, @NonNull GoogleMapOptions mapOptions) {
+    MapViewFragment fragment = new MapViewFragment();
+    Bundle args = new Bundle();
+    args.putParcelable("MapOptions", mapOptions);
 
-  public MapViewFragment(ReactApplicationContext reactContext, int viewTag) {
-    this.reactContext = reactContext;
-    this.viewTag = viewTag;
-  }
-  ;
+    fragment.setArguments(args);
+    fragment.reactContext = reactContext;
+    fragment.viewTag = viewTag;
 
-  private String style = "";
+    return fragment;
+  }
 
   @SuppressLint("MissingPermission")
   @Override
   public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
     super.onViewCreated(view, savedInstanceState);
 
     getMapAsync(
-        new OnMapReadyCallback() {
-          public void onMapReady(GoogleMap googleMap) {
-            mGoogleMap = googleMap;
+        googleMap -> {
+          mGoogleMap = googleMap;
+
+          mMapViewController = new MapViewController();
+          mMapViewController.initialize(googleMap, this::requireActivity);
 
-            mMapViewController = new MapViewController();
-            mMapViewController.initialize(googleMap, () -> requireActivity());
+          // Setup map listeners with the provided callback
+          mMapViewController.setupMapListeners(MapViewFragment.this);
 
-            // Setup map listeners with the provided callback
-            mMapViewController.setupMapListeners(MapViewFragment.this);
+          emitEvent("onMapReady", null);
 
-            emitEvent("onMapReady", null);
+          // Request layout to ensure fragment is properly sized
+          View fragmentView = getView();
+          if (fragmentView != null) {
+            fragmentView.requestLayout();
           }
         });
   }
@@ -130,10 +129,6 @@ public MapViewController getMapController() {
     return mMapViewController;
   }
 
-  public void applyStylingOptions() {}
-
-  public void setStylingOptions(StylingOptions stylingOptions) {}
-
   public void setMapStyle(String url) {
     mMapViewController.setMapStyle(url);
   }

android/src/main/java/com/google/android/react/navsdk/NavViewFragment.java

@@ -25,7 +25,7 @@
 import com.facebook.react.uimanager.events.Event;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.google.android.gms.maps.GoogleMap;
-import com.google.android.gms.maps.OnMapReadyCallback;
+import com.google.android.gms.maps.GoogleMapOptions;
 import com.google.android.gms.maps.model.Circle;
 import com.google.android.gms.maps.model.GroundOverlay;
 import com.google.android.gms.maps.model.LatLng;
@@ -44,16 +44,54 @@
 public class NavViewFragment extends SupportNavigationFragment
     implements INavViewFragment, INavigationViewCallback {
   private static final String TAG = "NavViewFragment";
+  private int viewTag; // React native view tag.
+  private ReactApplicationContext reactContext;
   private MapViewController mMapViewController;
   private GoogleMap mGoogleMap;
   private StylingOptions mStylingOptions;
 
-  private int viewTag; // React native view tag.
-  private ReactApplicationContext reactContext;
+  public static NavViewFragment newInstance(
+      ReactApplicationContext reactContext, int viewTag, @NonNull GoogleMapOptions mapOptions) {
+    NavViewFragment fragment = new NavViewFragment();
+    Bundle args = new Bundle();
+    args.putParcelable("MapOptions", mapOptions);
+
+    fragment.setArguments(args);
+    fragment.reactContext = reactContext;
+    fragment.viewTag = viewTag;
 
-  public NavViewFragment(ReactApplicationContext reactContext, int viewTag) {
-    this.reactContext = reactContext;
-    this.viewTag = viewTag;
+    return fragment;
+  }
+
+  @SuppressLint("MissingPermission")
+  @Override
+  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
+    super.onViewCreated(view, savedInstanceState);
+
+    setNavigationUiEnabled(NavModule.getInstance().getNavigator() != null);
+
+    getMapAsync(
+        googleMap -> {
+          mGoogleMap = googleMap;
+
+          mMapViewController = new MapViewController();
+          mMapViewController.initialize(googleMap, this::requireActivity);
+
+          // Setup map listeners with the provided callback
+          mMapViewController.setupMapListeners(NavViewFragment.this);
+
+          emitEvent("onMapReady", null);
+
+          // Request layout to ensure fragment is properly sized
+          View fragmentView = getView();
+          if (fragmentView != null) {
+            fragmentView.requestLayout();
+          }
+
+          setNavigationUiEnabled(NavModule.getInstance().getNavigator() != null);
+          addOnRecenterButtonClickedListener(onRecenterButtonClickedListener);
+          addPromptVisibilityChangedListener(onPromptVisibilityChangedListener);
+        });
   }
 
   private final NavigationView.OnRecenterButtonClickedListener onRecenterButtonClickedListener =
@@ -74,35 +112,6 @@ public void onVisibilityChanged(boolean isVisible) {
         }
       };
 
-  private String style = "";
-
-  @SuppressLint("MissingPermission")
-  @Override
-  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
-    super.onViewCreated(view, savedInstanceState);
-
-    setNavigationUiEnabled(NavModule.getInstance().getNavigator() != null);
-
-    getMapAsync(
-        new OnMapReadyCallback() {
-          public void onMapReady(GoogleMap googleMap) {
-            mGoogleMap = googleMap;
-
-            mMapViewController = new MapViewController();
-            mMapViewController.initialize(googleMap, () -> requireActivity());
-
-            // Setup map listeners with the provided callback
-            mMapViewController.setupMapListeners(NavViewFragment.this);
-
-            emitEvent("onMapReady", null);
-
-            setNavigationUiEnabled(NavModule.getInstance().getNavigator() != null);
-            addOnRecenterButtonClickedListener(onRecenterButtonClickedListener);
-            addPromptVisibilityChangedListener(onPromptVisibilityChangedListener);
-          }
-        });
-  }
-
   public MapViewController getMapController() {
     return mMapViewController;
   }