public function StyledGoogleMapStyle::buildOptionsForm in Styled Google Map 8.2

Provide a form to edit options for this plugin.

Overrides StylePluginBase::buildOptionsForm

File

src/Plugin/views/style/StyledGoogleMapStyle.php, line 174

Class

StyledGoogleMapStyle

Views area StyledGoogleMapStyle handler.

Namespace

Drupal\styled_google_map\Plugin\views\style

Code

public function buildOptionsForm(&$form, FormStateInterface $form_state) {
  parent::buildOptionsForm($form, $form_state);
  $handlers = $this->displayHandler
    ->getHandlers('field');
  $data_source_options = [
    '' => $this
      ->t('-- Choose the field --'),
  ];
  $pin_source_options = [
    '' => $this
      ->t('-- Choose the field --'),
  ];
  $source_options = [
    '' => $this
      ->t('-- Choose the field --'),
  ];

  /** @var \Drupal\views\Plugin\views\ViewsHandlerInterface $handle */
  foreach ($handlers as $key => $handle) {

    // Get all location sources.
    if (!empty($handle->options['type']) && $handle->options['type'] == 'geofield_default') {
      $data_source_options[$key] = $handle
        ->adminLabel();
    }

    // Get all pin sources.
    if (!empty($handle->options['type']) && $handle->options['type'] == 'image') {
      $pin_source_options[$key] = $handle
        ->adminLabel();
    }

    // Get all popup sources.
    $source_options[$key] = $handle
      ->adminLabel();
  }
  $form['data_source'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Which field contains geodata?'),
    '#description' => $this
      ->t('Needs to be a geofield.'),
    '#required' => TRUE,
    '#options' => $data_source_options,
    '#default_value' => $this->options['data_source'] ? $this->options['data_source'] : NULL,
  ];
  $form['pin_source'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Which field contains the pin image?'),
    '#description' => $this
      ->t('Needs to be an image field.'),
    '#options' => $pin_source_options,
    '#default_value' => $this->options['pin_source'] ? $this->options['pin_source'] : NULL,
  ];
  $form['default_pin_source'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Default pin image'),
    '#default_value' => $this->options['default_pin_source'],
    '#description' => $this
      ->t('Also you can have a default pin image for all the locations'),
  ];
  $form['active_pin_source'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Which field contains the active pin image?'),
    '#description' => $this
      ->t('Needs to be an image field. This will only be applicable when pin source has some field'),
    '#options' => $pin_source_options,
    '#default_value' => $this->options['active_pin_source'] ? $this->options['active_pin_source'] : NULL,
  ];
  $form['popup_source'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Which field contains the popup text?'),
    '#description' => $this
      ->t('Can be a field or rendered entity field.'),
    '#options' => $source_options,
    '#default_value' => $this->options['popup_source'] ? $this->options['popup_source'] : NULL,
  ];
  $form['marker_label'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Which field contains the marker label?'),
    '#description' => $this
      ->t('Can be a field or rendered entity field.'),
    '#options' => $source_options,
    '#default_value' => $this->options['marker_label'] ? $this->options['marker_label'] : NULL,
  ];
  $form['category_source'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Which field contains the category?'),
    '#description' => $this
      ->t('This will be used to have a class wrapper around the bubble to allow different styling per category.'),
    '#options' => $source_options,
    '#default_value' => $this->options['category_source'] ? $this->options['category_source'] : NULL,
  ];
  $form['main'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Map Options'),
  ];
  $form['main']['styled_google_map_view_width'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Width'),
    '#size' => '30',
    '#description' => $this
      ->t('This field determines how width the styled Google map'),
    '#default_value' => $this->options['main']['styled_google_map_view_width'],
  ];
  $form['main']['styled_google_map_view_height'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Height'),
    '#size' => '30',
    '#description' => $this
      ->t('This field determines the height of the styled Google map'),
    '#default_value' => $this->options['main']['styled_google_map_view_height'],
  ];
  $form['main']['styled_google_map_view_style'] = [
    '#type' => 'textarea',
    '#title' => $this
      ->t('Style'),
    '#description' => $this
      ->t('The style of the map'),
    '#default_value' => $this->options['main']['styled_google_map_view_style'],
  ];
  $form['main']['styled_google_map_view_active_pin'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Active pin image'),
    '#default_value' => $this->options['main']['styled_google_map_view_active_pin'],
  ];
  $form['main']['styled_google_map_view_pin_height'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Pin Height'),
    '#size' => '30',
    '#description' => $this
      ->t('If you want to scale the pin to certain dimensions. If you set width, height is also required'),
    '#default_value' => $this->options['main']['styled_google_map_view_pin_height'],
  ];
  $form['main']['styled_google_map_view_pin_width'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Pin Width'),
    '#size' => '30',
    '#description' => $this
      ->t('If you want to scale the pin to certain dimensions. If you set height, width is also required'),
    '#default_value' => $this->options['main']['styled_google_map_view_pin_width'],
  ];
  $form['main']['styled_google_map_view_maptype'] = [
    '#type' => 'select',
    '#options' => [
      'ROADMAP' => $this
        ->t('ROADMAP'),
      'SATELLITE' => $this
        ->t('SATELLITE'),
      'HYBRID' => $this
        ->t('HYBRID'),
      'TERRAIN' => $this
        ->t('TERRAIN'),
    ],
    '#title' => $this
      ->t('Map type'),
    '#default_value' => $this->options['main']['styled_google_map_view_maptype'],
    '#required' => TRUE,
  ];
  $form['main']['styled_google_map_gesture_handling'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Gesture handling'),
    '#description' => $this
      ->t('This setting controls how the API handles gestures on the map. See more <a href="@href">here</a>', [
      '@href' => 'https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.gestureHandling',
    ]),
    '#options' => [
      'cooperative' => $this
        ->t('Scroll events with a ctrl key or ⌘ key pressed zoom the map.'),
      'greedy' => $this
        ->t('All touch gestures and scroll events pan or zoom the map.'),
      'none' => $this
        ->t('The map cannot be panned or zoomed by user gestures.'),
      'auto' => $this
        ->t('(default) Gesture handling is either cooperative or greedy'),
    ],
    '#default_value' => $this->options['main']['styled_google_map_gesture_handling'],
  ];
  $form['main']['styled_google_map_view_zoom_default'] = [
    '#type' => 'select',
    '#options' => range(1, 35),
    '#title' => $this
      ->t('Default zoom level'),
    '#default_value' => $this->options['main']['styled_google_map_view_zoom_default'],
    '#description' => $this
      ->t('Should be between the Min and Max zoom level.
        This will generally not working as fitbounds will try to fit all pins on the map.'),
    '#required' => TRUE,
  ];
  $form['main']['styled_google_map_view_zoom_max'] = [
    '#type' => 'select',
    '#options' => range(1, 35),
    '#title' => $this
      ->t('Max zoom level'),
    '#default_value' => $this->options['main']['styled_google_map_view_zoom_max'],
    '#description' => $this
      ->t('Should be greater then the Min zoom level.'),
    '#required' => TRUE,
  ];
  $form['main']['styled_google_map_view_zoom_min'] = [
    '#type' => 'select',
    '#options' => range(1, 35),
    '#title' => $this
      ->t('Min zoom level'),
    '#default_value' => $this->options['main']['styled_google_map_view_zoom_min'],
    '#description' => $this
      ->t('Should be smaller then the Max zoom level.'),
    '#required' => TRUE,
  ];
  $form['main']['styled_google_map_view_maptypecontrol'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable Map Type control'),
    '#default_value' => $this->options['main']['styled_google_map_view_maptypecontrol'],
  ];
  $form['main']['styled_google_map_view_scalecontrol'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable scale control'),
    '#default_value' => $this->options['main']['styled_google_map_view_scalecontrol'],
  ];
  $form['main']['styled_google_map_view_rotatecontrol'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable rotate control'),
    '#default_value' => $this->options['main']['styled_google_map_view_rotatecontrol'],
  ];
  $form['main']['styled_google_map_view_draggable'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable dragging'),
    '#default_value' => $this->options['main']['styled_google_map_view_draggable'],
  ];
  $form['main']['styled_google_map_view_mobile_draggable'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable mobile dragging'),
    '#description' => $this
      ->t('Sometimes when the map covers big part of touch device screen draggable feature can cause inability to scroll the page'),
    '#default_value' => $this->options['main']['styled_google_map_view_mobile_draggable'],
  ];
  $form['main']['styled_google_map_view_streetviewcontrol'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable street view control'),
    '#default_value' => $this->options['main']['styled_google_map_view_streetviewcontrol'],
  ];
  $form['main']['styled_google_map_view_zoomcontrol'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable zoom control'),
    '#default_value' => $this->options['main']['styled_google_map_view_zoomcontrol'],
  ];
  $form['main']['styled_google_map_view_fullscreen'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable full screen control'),
    '#default_value' => $this->options['main']['styled_google_map_view_fullscreen'],
  ];
  $form['main']['styled_google_map_default_map_center'] = [
    '#type' => 'geofield_latlon',
    '#title' => $this
      ->t('Default map center coordinates'),
    '#default_value' => $this->options['main']['styled_google_map_default_map_center'],
  ];
  $form['marker_label_settings'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Marker label settings'),
    '#states' => [
      'invisible' => [
        ':select[name="style_options[marker_label]"]' => [
          'value' => '',
        ],
      ],
    ],
  ];
  $form['marker_label_settings']['color'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Colour'),
    '#description' => $this
      ->t('The color of the label text. Default color is black.'),
    '#default_value' => $this->options['marker_label_settings']['color'],
  ];
  $form['marker_label_settings']['fontFamily'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Font family'),
    '#description' => $this
      ->t('The font family of the label text (equivalent to the CSS font-family property).'),
    '#default_value' => $this->options['marker_label_settings']['fontFamily'],
  ];
  $form['marker_label_settings']['fontSize'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Font size'),
    '#description' => $this
      ->t('The font size of the label text (equivalent to the CSS font-size property). Default size is 14px.'),
    '#default_value' => $this->options['marker_label_settings']['fontSize'],
  ];
  $form['marker_label_settings']['fontWeight'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Font weight'),
    '#description' => $this
      ->t('The font weight of the label text (equivalent to the CSS font-weight property).'),
    '#default_value' => $this->options['marker_label_settings']['fontWeight'],
  ];
  $form['cluster_settings'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Cluster settings'),
  ];
  $form['cluster_settings']['cluster_enabled'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable clustering'),
    '#default_value' => $this->options['cluster_settings']['cluster_enabled'],
  ];
  $form['cluster_settings']['pin_image'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Cluster pin image'),
    '#default_value' => $this->options['cluster_settings']['pin_image'],
  ];
  $form['cluster_settings']['text_color'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Text color'),
    '#default_value' => $this->options['cluster_settings']['text_color'],
  ];
  $form['cluster_settings']['height'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Cluster image height'),
    '#default_value' => $this->options['cluster_settings']['height'],
    '#suffix' => $this
      ->t('pixels'),
  ];
  $form['cluster_settings']['width'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Cluster image width'),
    '#default_value' => $this->options['cluster_settings']['width'],
    '#suffix' => $this
      ->t('pixels'),
  ];
  $form['cluster_settings']['text_size'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Text size'),
    '#default_value' => $this->options['cluster_settings']['text_size'],
  ];
  $form['cluster_settings']['min_size'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Minimum cluster size'),
    '#default_value' => $this->options['cluster_settings']['min_size'],
    '#description' => $this
      ->t('The minimum number of pins to be grouped in a cluster.'),
  ];
  $form['spider_settings'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Spider settings'),
  ];
  $form['spider_settings']['spider_enabled'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable Spider'),
    '#default_value' => $this->options['spider_settings']['spider_enabled'],
  ];
  $form['spider_settings']['markers_wont_move'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Do not move markers'),
    '#default_value' => $this->options['spider_settings']['markers_wont_move'],
    '#description' => $this
      ->t('Spedir option from config: markersWontMove'),
  ];
  $form['spider_settings']['markers_wont_hide'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Do not hide markers'),
    '#default_value' => $this->options['spider_settings']['markers_wont_hide'],
    '#description' => $this
      ->t('Spedir option from config: markersWontHide'),
  ];
  $form['spider_settings']['basic_format_events'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Listen to basic format events'),
    '#default_value' => $this->options['spider_settings']['basic_format_events'],
    '#description' => $this
      ->t('Spedir option from config: basicFormatEvents'),
  ];
  $form['spider_settings']['pin_image'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Spider pin image'),
    '#default_value' => $this->options['spider_settings']['pin_image'],
  ];
  $form['spider_settings']['height'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Spider image height'),
    '#default_value' => $this->options['spider_settings']['height'],
    '#suffix' => $this
      ->t('pixels'),
  ];
  $form['spider_settings']['width'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Spider image width'),
    '#default_value' => $this->options['spider_settings']['width'],
    '#suffix' => $this
      ->t('pixels'),
  ];
  $form['spider_settings']['keep_spiderfied'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Keep markers spiderfied when clicked'),
    '#default_value' => $this->options['spider_settings']['keep_spiderfied'],
  ];
  $form['spider_settings']['nearby_distance'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('The pixel radius within which a marker is considered to be overlapping a clicked marker'),
    '#default_value' => $this->options['spider_settings']['nearby_distance'],
  ];
  $form['spider_settings']['circle_spiral_switchover'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('The lowest number of markers that will be fanned out into a spiral instead of a circle'),
    '#description' => $this
      ->t('Set this to 0 to always get spirals, or "Infinity" for all circles.'),
    '#default_value' => $this->options['spider_settings']['circle_spiral_switchover'],
  ];
  $form['spider_settings']['leg_weight'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('The thickness of the lines joining spiderfied markers to their original locations'),
    '#default_value' => $this->options['spider_settings']['leg_weight'],
  ];
  $form['spider_settings']['circleFootSeparation'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Circle foot separation to maintain distance between the markers'),
    '#default_value' => $this->options['spider_settings']['circleFootSeparation'],
  ];
  $form['spider_settings']['spiralFootSeparation'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Spiral Foot Separation to maintain distance between the markers'),
    '#default_value' => $this->options['spider_settings']['spiralFootSeparation'],
  ];
  $form['heatmap_settings'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Heat map settings'),
  ];
  $form['heatmap_settings']['heatmap_enabled'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Enable heat map layer'),
    '#description' => $this
      ->t('When this feature is enabled you can not add markers anymore'),
    '#default_value' => $this->options['heatmap_settings']['heatmap_enabled'],
  ];
  $form['heatmap_settings']['data_source'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Which field contains heat map weight?'),
    '#description' => $this
      ->t('Location data is taken from main view settings. Read more about weight <a href="@url">here</a>', [
      '@url' => 'https://developers.google.com/maps/documentation/javascript/heatmaplayer',
    ]),
    '#options' => $source_options,
    '#default_value' => $this->options['heatmap_settings']['data_source'] ? $this->options['heatmap_settings']['data_source'] : NULL,
    '#states' => [
      'visible' => [
        ':input[name="style_options[heatmap_settings][heatmap_enabled]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['heatmap_settings']['dissipating'] = [
    '#type' => 'checkbox',
    '#title' => $this
      ->t('Dissipating'),
    '#description' => $this
      ->t('Specifies whether heatmaps dissipate on zoom. By default, the radius of influence of a data point is specified by the radius option only. When dissipating is disabled, the radius option is interpreted as a radius at zoom level 0.'),
    '#default_value' => $this->options['heatmap_settings']['dissipating'],
    '#states' => [
      'visible' => [
        ':input[name="style_options[heatmap_settings][heatmap_enabled]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['heatmap_settings']['gradient'] = [
    '#type' => 'textarea',
    '#title' => $this
      ->t('Gradient'),
    '#description' => $this
      ->t('The color gradient of the heatmap, specified as an array of CSS color strings. All CSS3 colors are supported except for extended named colors. Write one colour per line.'),
    '#default_value' => $this->options['heatmap_settings']['gradient'],
    '#states' => [
      'visible' => [
        ':input[name="style_options[heatmap_settings][heatmap_enabled]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['heatmap_settings']['opacity'] = [
    '#type' => 'number',
    '#min' => 0,
    '#max' => 1,
    '#step' => 0.1,
    '#title' => $this
      ->t('Opacity'),
    '#description' => $this
      ->t('The opacity of the heatmap, expressed as a number between 0 and 1. Defaults to 0.6.'),
    '#default_value' => $this->options['heatmap_settings']['opacity'],
    '#states' => [
      'visible' => [
        ':input[name="style_options[heatmap_settings][heatmap_enabled]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['heatmap_settings']['radius'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Radius'),
    '#description' => $this
      ->t('The radius of influence for each data point, in pixels.'),
    '#default_value' => $this->options['heatmap_settings']['radius'],
    '#states' => [
      'visible' => [
        ':input[name="style_options[heatmap_settings][heatmap_enabled]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['heatmap_settings']['maxIntensity'] = [
    '#type' => 'number',
    '#title' => $this
      ->t('Max intensity'),
    '#description' => $this
      ->t('The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum.'),
    '#default_value' => $this->options['heatmap_settings']['maxIntensity'],
    '#states' => [
      'visible' => [
        ':input[name="style_options[heatmap_settings][heatmap_enabled]"]' => [
          'checked' => TRUE,
        ],
      ],
    ],
  ];
  $form['popup'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Popup Styling'),
    '#description' => $this
      ->t('All settings for the popup exposed by the library. If you want more flexibility in your the styling of the popup. You can use the CSS defined classes'),
  ];
  $form['popup']['second_click'] = [
    '#title' => $this
      ->t('Close popup on second mouse click'),
    '#type' => 'select',
    '#options' => [
      '0' => $this
        ->t('No'),
      '1' => $this
        ->t('Yes'),
    ],
    '#default_value' => $this->options['popup']['second_click'],
  ];
  $form['popup']['close_button_source'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Close button image'),
    '#default_value' => $this->options['popup']['close_button_source'],
  ];
  $form['popup']['open_event'] = [
    '#type' => 'select',
    '#options' => [
      'click' => $this
        ->t('On click'),
      'mouseover' => $this
        ->t('On hover'),
    ],
    '#title' => $this
      ->t('Mouse event for opening popup'),
    '#default_value' => $this->options['popup']['open_event'],
  ];
  $form['popup']['styled_google_map_view_shadow_style'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Shadow style'),
    '#options' => [
      0,
      1,
      2,
    ],
    '#description' => $this
      ->t('1: shadow behind, 2: shadow below, 0: no shadow'),
    '#default_value' => $this->options['popup']['styled_google_map_view_shadow_style'],
  ];
  $form['popup']['styled_google_map_view_padding'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Padding'),
    '#field_suffix' => 'px',
    '#default_value' => $this->options['popup']['styled_google_map_view_padding'],
  ];
  $form['popup']['styled_google_map_view_border_radius'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Border radius'),
    '#field_suffix' => 'px',
    '#default_value' => $this->options['popup']['styled_google_map_view_border_radius'],
  ];
  $form['popup']['styled_google_map_view_border_width'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Border width'),
    '#field_suffix' => 'px',
    '#default_value' => $this->options['popup']['styled_google_map_view_border_width'],
  ];
  $form['popup']['styled_google_map_view_border_color'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Border color'),
    '#field_suffix' => '#hex',
    '#default_value' => $this->options['popup']['styled_google_map_view_border_color'],
  ];
  $form['popup']['styled_google_map_view_background_color'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Background color'),
    '#field_suffix' => '#hex',
    '#default_value' => $this->options['popup']['styled_google_map_view_background_color'],
  ];
  $form['popup']['styled_google_map_view_min_width'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Min width'),
    '#field_suffix' => 'px (or auto)',
    '#default_value' => $this->options['popup']['styled_google_map_view_min_width'],
  ];
  $form['popup']['styled_google_map_view_max_width'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Max width'),
    '#field_suffix' => 'px (or auto)',
    '#default_value' => $this->options['popup']['styled_google_map_view_max_width'],
  ];
  $form['popup']['styled_google_map_view_min_height'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Min height'),
    '#field_suffix' => 'px (or auto)',
    '#default_value' => $this->options['popup']['styled_google_map_view_min_height'],
  ];
  $form['popup']['styled_google_map_view_max_height'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Max height'),
    '#field_suffix' => 'px (or auto)',
    '#default_value' => $this->options['popup']['styled_google_map_view_max_height'],
  ];
  $form['popup']['styled_google_map_view_arrow_style'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Arrow style'),
    '#options' => [
      0,
      1,
      2,
    ],
    '#description' => $this
      ->t('1: left side visible, 2: right side visible, 0: both sides visible'),
    '#default_value' => $this->options['popup']['styled_google_map_view_arrow_style'],
  ];
  $form['popup']['styled_google_map_view_arrow_size'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Arrow size'),
    '#field_suffix' => 'px',
    '#default_value' => $this->options['popup']['styled_google_map_view_arrow_size'],
  ];
  $form['popup']['styled_google_map_view_arrow_position'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Arrow position'),
    '#field_suffix' => 'px',
    '#default_value' => $this->options['popup']['styled_google_map_view_arrow_position'],
  ];
  $form['popup']['styled_google_map_view_disable_auto_pan'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Auto pan'),
    '#options' => [
      TRUE => $this
        ->t('Yes'),
      FALSE => $this
        ->t('No'),
    ],
    '#description' => $this
      ->t('Automatically center the pin on click'),
    '#default_value' => $this->options['popup']['styled_google_map_view_disable_auto_pan'],
  ];
  $form['popup']['styled_google_map_view_hide_close_button'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Hide close button'),
    '#options' => [
      TRUE => $this
        ->t('Yes'),
      FALSE => $this
        ->t('No'),
    ],
    '#description' => $this
      ->t('Hide the popup close button'),
    '#default_value' => $this->options['popup']['styled_google_map_view_hide_close_button'],
  ];
  $form['popup']['styled_google_map_view_disable_animation'] = [
    '#type' => 'select',
    '#title' => $this
      ->t('Disable animation'),
    '#options' => [
      TRUE => $this
        ->t('Yes'),
      FALSE => $this
        ->t('No'),
    ],
    '#description' => $this
      ->t('Disables the popup animation'),
    '#default_value' => $this->options['popup']['styled_google_map_view_disable_animation'],
  ];
  $form['popup_classes'] = [
    '#type' => 'details',
    '#title' => $this
      ->t('Popup classes'),
    '#description' => $this
      ->t('CSS classes for easy popup styling'),
  ];
  $form['popup_classes']['styled_google_map_view_content_container_class'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Wrapper class'),
    '#default_value' => $this->options['popup_classes']['styled_google_map_view_content_container_class'],
  ];
  $form['popup_classes']['styled_google_map_view_background_class'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Background class'),
    '#default_value' => $this->options['popup_classes']['styled_google_map_view_background_class'],
  ];
  $form['popup_classes']['styled_google_map_view_arrow_class'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Arrow class'),
    '#default_value' => $this->options['popup_classes']['styled_google_map_view_arrow_class'],
  ];
  $form['popup_classes']['styled_google_map_view_arrow_outer_class'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Arrow outer class'),
    '#default_value' => $this->options['popup_classes']['styled_google_map_view_arrow_outer_class'],
  ];
  $form['popup_classes']['styled_google_map_view_arrow_inner_class'] = [
    '#type' => 'textfield',
    '#title' => $this
      ->t('Arrow inner class'),
    '#default_value' => $this->options['popup_classes']['styled_google_map_view_arrow_inner_class'],
  ];
}