Styling via Google Cloud Console: allow setting google map element mapId property

Problem/Motivation

In Google Cloud Console you can create a custom google maps style for a project. That map style will have a unique Map ID.
If you want to use that map style, then you need to set the google maps element 'mapId' property to that of the cloud console. Currently, that value is not possible to override in the geolocation module because its fixed like this:

          this.googleMap = new google.maps.Map(
            this.container,
            Object.assign(this.settings.google_map_settings, {
              mapId: this.id,

Proposed resolution

Step 1
Make the mapId property configurable/overridable by changing the code to:

          this.googleMap = new google.maps.Map(
            this.container,
            Object.assign(this.settings.google_map_settings, {
              mapId: this.settings.google_map_settings.mapId ?? this.id,

Step 2
Now you can change mapId like in this proof of concept:

function mymodule_preprocess_views_view__myview__myviewdisplay(&$variables) {
  if (isset($variables['rows']['#attached']['drupalSettings']['geolocation']['maps'])) {
    foreach ($variables['rows']['#attached']['drupalSettings']['geolocation']['maps'] as &$map) {
      $map['google_map_settings']['mapId'] = 'yourgooglecloudconsolemapidhere';
    }
  }
}

Step 3
Now that its possible at a fundamental level to set the mapId, we should add a setting for it in the view geolocation google map settings