Function parseGoogleMapsParams

Splits a string into associated key value pairs of supported Google Maps query params.

Legacy themes passed agency.preferences.google_maps_api_key directly to a <script> tag to initialise google maps. Some agents suffixed the google_maps_api_key with additional query params (eg. &channel=03) to provide additional data, such as billing information, to google maps.

The react-google-maps APIProvider does not directly support this as it url encodes the value passed to the apiKey prop, transforming values like &channel=03 to %26channel%3D03 and breaking the map with an api key error.

This function allows support for passing a single api key as agency.preferences.google_maps_api_key as well as additional params in a way that allows easy usage of these params as props with the <APIProvider> provided by react-google-maps.

Eg.

const { apiKey, channel, region } = parseGoogleMapsParams(googleMapsKey);

...

return (
  <APIProvider
    apiKey={apiKey}
    {...(channel && { channel })}
    {...(region && { region })}
 >
  ...
 </APIProvider>
)
Copy