@trackunit/react-map-adapter-google

Google Maps adapter for @trackunit/react-map: implements the shared adapter contract from @trackunit/react-map-adapter-shared using @vis.gl/react-google-maps and the Google Maps JavaScript API.

Installation

npm install @trackunit/react-map @trackunit/react-map-adapter-google

TypeScript consumers also need the @types/google.maps peer dependency.

Public API

| Export | Role | | --- | --- | | googleMapsAdapter | Factory that returns adapter config for useMap (from @trackunit/react-map) | | googleMapCspDirectives | Factory returning Google Maps runtime CSP requirements for IrisX app manifests | | GoogleMapsConfig | Configuration type for the adapter | | GoogleApiProvider | Optional wrapper to load the Maps JS API once for multiple map instances (recommended when several maps use vector/cloud mapId styling) | | GoogleMapsAdapterInstance | Low-level instance factory (advanced use) | | GoogleMapsRenderer | Internal renderer used by the adapter (advanced or testing) |

Typical usage

Pass the adapter into useMap from @trackunit/react-map (see JSDoc on googleMapsAdapter in source for a full example).

import { useMap } from "@trackunit/react-map";
import { googleMapsAdapter } from "@trackunit/react-map-adapter-google";

const MyMap = () => {
  const googleMapsApiKey = ""; // your API key here
  const [Map] = useMap(googleMapsAdapter({ apiKey: googleMapsApiKey }));

  return <Map aria-label="Map" className="h-full w-full" />;
};

For multiple Google maps in one tree, wrap them in GoogleApiProvider with your API key and give each map a distinct mapInstanceId in its GoogleMapsConfig so the vis.gl layer registry can tell maps apart. See the docblock on GoogleApiProvider for details.

IrisX apps

The IrisX iframe Content Security Policy blocks Google Maps unless the app declares the adapter's runtime requirements. An empty cspHeader applies only the IrisX default policy which does not include Google Maps automatically.

Import and spread the adapter-owned directives in iris-app-manifest.ts:

import { googleMapCspDirectives } from "@trackunit/react-map-adapter-google";

const irisAppManifest = {
  // ...
  cspHeader: {
    ...googleMapCspDirectives(),
  },
};

Use the exported directives instead of copying host lists or using the Manager-only defaultCspConfig(). This keeps the CSP requirement versioned with the adapter.

Dependencies

Depends on @trackunit/react-map-adapter-shared and Google Maps–related packages (e.g. @vis.gl/react-google-maps). It does not import @trackunit/react-map (adapters are consumed by the map package, not the reverse).

Part of the @trackunit/react-map family

| Package | Description | | --- | --- | | @trackunit/react-map | Core provider-agnostic map library | | @trackunit/react-map-adapter-google | Google Maps adapter (this package) | | @trackunit/react-map-adapter-mapbox | Mapbox GL adapter | | @trackunit/react-map-adapter-shared | Shared adapter contracts and utilities | | @trackunit/react-map-color-utils | CSS color utilities for the map stack |

For more info and a full guide on Iris App SDK Development, please visit our Developer Hub.

Trackunit

This package was developed by Trackunit ApS. Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.