Skip to main content

Usage

GoogleMapsView renders a map and GoogleMapsStreetView a Street View panorama. Both are native views and take a style like any other view.

Overlays​

Markers, polylines, polygons, circles, heatmaps, KML layers and URL tile overlays are arrays of plain objects. Every item needs an id that stays the same across renders: when an array changes, the view adds, updates and removes items by id. Keep the arrays in state or memoize them, and pass a new array to change something.

const [markers, setMarkers] = useState<RNMarker[]>([
  {
    id: 'ferry-building',
    coordinate: { latitude: 37.7955, longitude: -122.3937 },
  },
]);

<GoogleMapsView style={{ flex: 1 }} markers={markers} />;

Markers without a zIndex overlap in no defined order. Give labels, cards and a selected marker a higher zIndex than the rest. Marker icons are SVG strings, see SVG markers.

Initial options​

mapOptions and panoramaOptions are applied once, when the view is created. Move the camera later with the methods below.

Callbacks​

Nitro passes a function to a native view only when it is wrapped with callback() from react-native-nitro-modules. Memoize the wrapped function, so it is not created again on every render:

import { callback } from 'react-native-nitro-modules';

const onMarkerPress = useMemo(
  () => callback((id: string) => setSelectedId(id)),
  []
);

<GoogleMapsView style={{ flex: 1 }} onMarkerPress={onMarkerPress} />;

Methods​

hybridRef passes the native view to a callback. Keep it in a ref and call its methods, e.g. to move the camera:

const map = useRef<GoogleMapsViewRef | null>(null);
const hybridRef = useMemo(
  () =>
    callback((ref: GoogleMapsViewRef) => {
      map.current = ref;
    }),
  []
);

<GoogleMapsView style={{ flex: 1 }} hybridRef={hybridRef} />;

map.current?.setCamera(
  { center: { latitude: 37.7955, longitude: -122.3937 }, zoom: 15 },
  true,
  600
);

The methods are listed under RNGoogleMapsPlusViewMethods and RNGoogleMapsPlusStreetViewMethods in the API reference.

Examples​

The examples show complete use cases with the code and screenshots on iOS and Android. The example app in the repository runs them under Docs Examples.