Migration Guide v1 to v2

Migration Guide v1 to v2

Upgrading the provider component

The provider component was renamed to GoogleMapsProvider, since it no longer focuses on creating a map instance. You can now use it without map container to load and make use of the Google Maps API.

// Before (Don't use this anymore!)
<GoogleMapProvider googleMapsAPIKey="YOUR API KEY HERE">
  {children}
</GoogleMapProvider>

// After
<GoogleMapsProvider googleMapsAPIKey="YOUR API KEY HERE">
  {children}
</GoogleMapsProvider>

The onLoad property was renamed to onLoadMap.

// Before (Don't use this anymore!)
<GoogleMapProvider
  googleMapsAPIKey="YOUR API KEY HERE"
  onLoad={(map) => map.setZoom(4)}>
  ...
</GoogleMapProvider>

// After
<GoogleMapsProvider
  googleMapsAPIKey="YOUR API KEY HERE"
  onLoadMap={(map) => map.setZoom(4)}>
  ...
</GoogleMapsProvider>

Upgrading the hooks

The useGoogleMap hook now only returns what it was named after – the Google Maps map instance.

// Before (Don't use this anymore!)
const {map} = useGoogleMap();

// After
const map = useGoogleMap();

If you used the loading state of the useGoogleMap hook, please switch to the onLoadScript property of the GoogleMapsProvider now.

// Before (Don't use this anymore!)
const {loading} = useGoogleMap();

if (!loading) {
  // Do something when the Google Maps API is loaded
}

// After
<GoogleMapsProvider
  googleMapsAPIKey="YOUR API KEY HERE"
  onLoadScript={() => {
    /* Do something when the Google Maps API is loaded */
  }}>
  ...
</GoogleMapsProvider>

We developed a naming convention for the hooks and renamed some exiting hooks after it.

// Before (Don't use this anymore!)
const {...} = useDirections(directionsOptions);

// After
const {...} = useDirectionsService(directionsOptions);

// Before (Don't use this anymore!)
const geocoder = useGeocoder();

// After
const geocoder = useGeocodingService();

// Before (Don't use this anymore!)
const distanceMatrixService = useDistanceMatrix();

// After
const distanceMatrixService = useDistanceMatrixService();

Upgrading locally cloned repository

If you checked out the @ubilabs/google-maps-react-hooks repository v1 from GitHub, you might need to follow these steps to get the project running again:

1. Delete node_module folders (in root and examples directory)
2. Run npm ci for a clean install

Notice that the task names have changed! Check out the package.json for the new task names.