Added traffic layer (Issue #3093362), Enabled use of custom markers (Issue #3128178).

README.md

@@ -88,7 +88,7 @@ If the map is not being displayed, check the following:
 
 -   Did you configured the “marker” options in the content map field?
 
--   Did you upgraded from a previous release? If so check the release notes for
+-   Did you upgrade from a previous release? If so check the release notes for
     upgrade steps.
 
 -   Do you have any Javascript errors on the page you have the map?
@@ -100,10 +100,5 @@ MAINTAINERS
 
 Current maintainers:
 
+-   Scot Hubbard (scot.hubbard) - <https://www.drupal.org/u/scothubbard>
 -   Paulo Gomes (pauloamgomes) - <https://www.drupal.org/u/pauloamgomes>
-
--   Scott Hubbard (scot.hubbard) - <https://www.drupal.org/u/scothubbard>
-
- 
-
- 

css/google-map-field-widget-renderer.css

@@ -61,10 +61,37 @@
 }
 
 #google_map_map_container {
-  flex: 1;
+  flex: 1 75%;
 }
 
 #google_map_field_options {
-  flex: 0 0 9em;
+  flex: 0 0 25%;
   order: 1;
 }
+
+#google_map_field_options select,
+#google_map_field_options input[type="text"] {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+#google_map_field_options .form-checkbox::after {
+  clear: both;
+  content: " ";
+  display: table;
+}
+
+#google_map_field_options .form-checkbox {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+#google_map_field_options .form-checkbox input,
+#google_map_field_options .form-checkbox label {
+  float: left;
+}
+
+#google_map_field_options .form-checkbox label {
+  margin-top: 2px;
+  padding-left: 5px;
+}

google_map_field.install

@@ -162,3 +162,29 @@ function google_map_field_update_8002() {
 
   \Drupal::state()->set('google_map_field_8102_processed', $processed_fields);
 }
+
+/**
+ * Adds custom marker field.
+ */
+function google_map_field_update_8003() {
+  $columns_to_add = ['marker_icon'];
+  $processed_fields = google_map_field_add_columns_to_schema($columns_to_add);
+
+  \Drupal::state()->set('google_map_field_8103_processed', $processed_fields);
+}
+
+/**
+ * Adds traffic layer field.
+ */
+function google_map_field_update_8104() {
+  $columns_to_add = ['traffic'];
+  $processed_fields = google_map_field_add_columns_to_schema($columns_to_add);
+
+  // Set correct state for previous updates.
+  \Drupal::state()->set('google_map_field_8001_processed', $processed_fields);
+  \Drupal::state()->set('google_map_field_8002_processed', $processed_fields);
+  \Drupal::state()->set('google_map_field_8003_processed', $processed_fields);
+
+  // Set state for this update.
+  \Drupal::state()->set('google_map_field_8104_processed', $processed_fields);
+}

google_map_field.module

@@ -20,6 +20,8 @@ function google_map_field_theme($existing, $type, $theme, $path) {
         'width' => NULL,
         'height' => NULL,
         'show_marker' => NULL,
+        'marker_icon' => NULL,
+        'traffic' => NULL,
         'show_controls' => NULL,
         'infowindow' => NULL,
       ],

js/google-map-field-renderer.js

@@ -12,6 +12,8 @@ var google_map_field_map;
         var zoom = parseInt($(this).attr('data-zoom'));
         var type = $(this).attr('data-type');
         var show_marker = $(this).attr('data-marker-show') === "true";
+        var traffic = $(this).attr('data-traffic') === "true";
+        var marker_icon = $(this).attr('data-marker-icon');
         var show_controls = $(this).attr('data-controls-show') === "true";
         var info_window = $(this).attr('data-infowindow') === "true";
 
@@ -27,6 +29,11 @@ var google_map_field_map;
 
         var google_map_field_map = new google.maps.Map(this, mapOptions);
 
+        if (traffic) {
+          var trafficLayer = new google.maps.TrafficLayer();
+          trafficLayer.setMap(google_map_field_map);
+        }
+
         google.maps.event.addDomListener(window, 'resize', function () {
           var center = google_map_field_map.getCenter();
           google.maps.event.trigger(google_map_field_map, "resize");
@@ -38,6 +45,7 @@ var google_map_field_map;
           position: latlng,
           optimized: false,
           visible: show_marker,
+          icon: marker_icon,
           map: google_map_field_map
         });
 

js/google-map-field-widget-renderer-previews.js

@@ -13,7 +13,10 @@
         var data_lon = $('input[data-lon-delta="' + data_delta + '"]').val();
         var data_zoom = $('input[data-zoom-delta="' + data_delta + '"]').attr('value');
         var data_type = $('input[data-type-delta="' + data_delta + '"]').attr('value');
-        var data_marker = $('input[data-marker-delta="' + data_delta + '"]').val() === "1";;
+        var data_traffic = $('input[data-traffic-delta="' + data_delta + '"]').val() === "1";
+        var data_marker = $('input[data-marker-delta="' + data_delta + '"]').val() === "1";
+        var data_marker_icon = $('input[data-marker-icon-delta="' + data_delta + '"]').attr('value');
+        var show_controls = $('input[data-controls-delta="' + data_delta + '"]').val() === "1";
 
         data_lat = googleMapFieldValidateLat(data_lat);
         data_lon = googleMapFieldValidateLon(data_lon);
@@ -30,15 +33,22 @@
           zoomControl: false,
           scrollwheel: false,
           disableDoubleClickZoom: true,
-          disableDefaultUI: true,
+          disableDefaultUI: show_controls ? false : true,
         };
         google_map_field_map = new google.maps.Map(this, mapOptions);
 
+        // see if we need to add a traffic layer
+        if (data_traffic) {
+          var trafficLayer = new google.maps.TrafficLayer();
+          trafficLayer.setMap(google_map_field_map);
+        }
+
         // drop a marker at the specified lat/lng coords
         marker = new google.maps.Marker({
           position: latlng,
           optimized: false,
           visible: data_marker,
+          icon: data_marker_icon,
           map: google_map_field_map
         });
 

js/google-map-field-widget-renderer-setter.js

@@ -13,7 +13,9 @@
       var type = $('#edit-type').val();
       var width = $('#edit-width').val();
       var height = $('#edit-height').val();
+      var traffic = $('#edit-traffic').prop('checked') ? "1" : "0";
       var show_marker = $('#edit-marker').prop('checked') ? "1" : "0";
+      var marker_icon = $('#edit-marker-icon').val();
       var show_controls = $('#edit-controls').prop('checked') ? "1" : "0";
       var infowindow_text = $('#edit-infowindow').val();
 
@@ -23,7 +25,9 @@
       $('input[data-type-delta="' + delta + '"]').prop('value', type).attr('value', type);
       $('input[data-width-delta="' + delta + '"]').prop('value', width).attr('value', width);
       $('input[data-height-delta="' + delta + '"]').prop('value', height).attr('value', height);
+      $('input[data-traffic-delta="' + delta + '"]').prop('value', traffic).attr('value', traffic);
       $('input[data-marker-delta="' + delta + '"]').prop('value', show_marker).attr('value', show_marker);
+      $('input[data-marker-icon-delta="' + delta + '"]').prop('value', marker_icon).attr('value', marker_icon);
       $('input[data-controls-delta="' + delta + '"]').prop('value', show_controls).attr('value', show_controls);
       $('input[data-infowindow-delta="' + delta + '"]').prop('value', infowindow_text).attr('value', infowindow_text);
 
@@ -50,7 +54,7 @@
     dialogHTML += '      </div>';
     dialogHTML += '      <div id="infowindow_container">';
     dialogHTML += '        <label for="edit-infowindow">' + Drupal.t('InfoWindow Popup text: (optional)') + '</label>';
-    dialogHTML += '        <textarea class="form-textarea" id="edit-infowindow" name="infowindow" rows="5" cols="70"></textarea>';
+    dialogHTML += '        <textarea class="form-textarea" id="edit-infowindow" name="infowindow" rows="3" cols="70"></textarea>';
     dialogHTML += '      </div>';
     dialogHTML += '    </div>';
     dialogHTML += '    <div id="google_map_field_options">';
@@ -62,10 +66,20 @@
     dialogHTML += '      <input type="text" id="edit-width" size="5" maxlength="6" name="field-width" value="" />';
     dialogHTML += '      <label for="edit-height">' + Drupal.t('Map Height') + '</label>';
     dialogHTML += '      <input type="text" id="edit-height" size="5" maxlength="6" name="field-height" value="" />';
-    dialogHTML += '      <label for="edit-controls">' + Drupal.t('Enable controls') + '</label>';
-    dialogHTML += '      <input type="checkbox" class="form-checkbox" id="edit-controls" name="field_controls" />';
-    dialogHTML += '      <label for="edit-marker">' + Drupal.t('Enable marker') + '</label>';
-    dialogHTML += '      <input type="checkbox" class="form-checkbox" id="edit-marker" name="field_marker" />';
+    dialogHTML += '      <div class="form-checkbox">';
+    dialogHTML += '        <input type="checkbox" class="form-checkbox" id="edit-controls" name="field_controls" />';
+    dialogHTML += '        <label for="edit-controls">' + Drupal.t('Enable controls') + '</label>';
+    dialogHTML += '      </div>';
+    dialogHTML += '      <div class="form-checkbox">';
+    dialogHTML += '        <input type="checkbox" class="form-checkbox" id="edit-traffic" name="field_traffic" />';
+    dialogHTML += '        <label for="edit-traffic">' + Drupal.t('Traffic layer') + '</label>';
+    dialogHTML += '      </div>';
+    dialogHTML += '      <div class="form-checkbox">';
+    dialogHTML += '        <input type="checkbox" class="form-checkbox" id="edit-marker" name="field_marker" />';
+    dialogHTML += '        <label for="edit-marker">' + Drupal.t('Enable marker') + '</label>';
+    dialogHTML += '      </div>';
+    dialogHTML += '      <label for="edit-marker-icon">' + Drupal.t('Custom marker') + '</label>';
+    dialogHTML += '      <input type="text" size="10" id="edit-marker-icon" name="field_marker_icon" />';
     dialogHTML += '    </div>';
     dialogHTML += '  </div>';
     dialogHTML += '</div>';
@@ -90,6 +104,8 @@
 
     dialog.dialog('open');
 
+    var trafficLayer = new google.maps.TrafficLayer();
+
     // Handle map options inside dialog.
     $('#edit-zoom').change(function () {
       google_map_field_map.setZoom(googleMapFieldValidateZoom($(this).val()));
@@ -100,9 +116,20 @@
     $('#edit-controls').change(function () {
       google_map_field_map.setOptions({disableDefaultUI : !$(this).prop('checked')});
     })
+    $('#edit-traffic').change(function () {
+      if ($(this).prop('checked')) {
+        trafficLayer.setMap(google_map_field_map);
+      }
+      else {
+        trafficLayer.setMap(null);
+      }
+    })
     $('#edit-marker').change(function () {
       marker.setVisible($(this).prop('checked'));
     })
+    $('#edit-marker-icon').change(function () {
+      marker.setIcon($(this).val());
+    })
 
     // Create the map setter map.
     // get the lat/lon from form elements
@@ -112,7 +139,9 @@
     var type = $('input[data-type-delta="' + delta + '"]').attr('value');
     var width = $('input[data-width-delta="' + delta + '"]').attr('value');
     var height = $('input[data-height-delta="' + delta + '"]').attr('value');
+    var traffic = $('input[data-traffic-delta="' + delta + '"]').val() === "1";
     var show_marker = $('input[data-marker-delta="' + delta + '"]').val() === "1";
+    var marker_icon = $('input[data-marker-icon-delta="' + delta + '"]').attr('value');
     var show_controls = $('input[data-controls-delta="' + delta + '"]').val() === "1";
     var infowindow_text = $('input[data-infowindow-delta="' + delta + '"]').attr('value');
 
@@ -124,12 +153,12 @@
     $('#edit-type').val(type);
     $('#edit-width').prop('value', width).attr('value', width);
     $('#edit-height').prop('value', height).attr('value', height);
+    $('#edit-traffic').prop('checked', traffic);
     $('#edit-marker').prop('checked', show_marker);
+    $('#edit-marker-icon').val(marker_icon);
     $('#edit-controls').prop('checked', show_controls);
     $('#edit-infowindow').val(infowindow_text);
 
-    // $('#edit-controls').prop('checked', controls);
-
     var latlng = new google.maps.LatLng(lat, lon);
     var mapOptions = {
       zoom: parseInt(zoom),
@@ -140,6 +169,10 @@
     };
     google_map_field_map = new google.maps.Map(document.getElementById("gmf_container"), mapOptions);
 
+    if (traffic) {
+      trafficLayer.setMap(google_map_field_map);
+    }
+
     // Add map listener
     google.maps.event.addListener(google_map_field_map, 'zoom_changed', function () {
       $('#edit-zoom').val(google_map_field_map.getZoom());
@@ -151,6 +184,7 @@
       optimized: false,
       draggable: true,
       visible: show_marker,
+      icon: marker_icon,
       map: google_map_field_map
     });
 
@@ -164,6 +198,7 @@
         optimized: false,
         draggable: true,
         visible: $('#edit-marker').prop('checked'),
+        icon: marker_icon,
         map: google_map_field_map
       });
     });
@@ -181,6 +216,7 @@
       position: latlng,
       draggable: true,
       visible: $('#edit-marker').prop('checked'),
+      icon: marker_icon,
       map: google_map_field_map
     });
     google.maps.event.addListener(marker, 'dragend', function (event) {

js/google-map-field-widget-renderer.js

@@ -13,6 +13,9 @@
         $('input[data-lat-delta="' + data_delta + '"]').prop('value', '').attr('value', '');
         $('input[data-lon-delta="' + data_delta + '"]').prop('value', '').attr('value', '');
         $('input[data-zoom-delta="' + data_delta + '"]').prop('value', '').attr('value', 9);
+        $('input[data-traffic-delta="' + data_delta + '"]').prop('value', '').attr('value', 0);
+        $('input[data-marker-delta="' + data_delta + '"]').prop('value', '').attr('value', 1);
+        $('input[data-marker-icon-delta="' + data_delta + '"]').prop('value', '').attr('value', '');
         $('input[data-type-delta="' + data_delta + '"]').prop('value', '').attr('value', 'roadmap');
         googleMapFieldPreviews(data_delta);
       });

src/Form/GmapFieldSettingsForm.php

@@ -132,6 +132,7 @@ class GmapFieldSettingsForm extends ConfigFormBase {
     $config->set('google_map_field_auth_method', $form_state->getValue('google_map_field_auth_method'))
       ->set('google_map_field_apikey', $form_state->getValue('google_map_field_apikey'))
       ->set('google_map_field_map_client_id', $form_state->getValue('google_map_field_map_client_id'))
+      ->set('google_map_field_icon', $form_state->getValue('google_map_field_icon'))
       ->save();
     parent::submitForm($form, $form_state);
   }

src/Plugin/Field/FieldFormatter/GoogleMapFieldDefaultFormatter.php

@@ -32,6 +32,8 @@ class GoogleMapFieldDefaultFormatter extends FormatterBase {
         '#zoom' => $item->zoom,
         '#type' => $item->type,
         '#show_marker' => $item->marker === "1" ? "true" : "false",
+        '#marker_icon' => $item->marker_icon,
+        '#traffic' => $item->traffic === "1" ? "true" : "false",
         '#show_controls' => $item->controls === "1" ? "true" : "false",
         '#width' => $item->width ? $item->width : '320px',
         '#height' => $item->height ? $item->height : '200px',

src/Plugin/Field/FieldType/GoogleMapFieldType.php

@@ -68,6 +68,16 @@ class GoogleMapFieldType extends FieldItemBase {
           'length' => 10,
           'not null' => FALSE,
         ],
+        'traffic' => [
+          'type' => 'int',
+          'length' => 10,
+          'not null' => FALSE,
+        ],
+        'marker_icon' => [
+          'type' => 'varchar',
+          'length' => 512,
+          'not null' => FALSE,
+        ],
         'controls' => [
           'type' => 'int',
           'length' => 10,
@@ -118,6 +128,12 @@ class GoogleMapFieldType extends FieldItemBase {
     $properties['marker'] = DataDefinition::create('integer')
       ->setLabel(new TranslatableMarkup('Show marker'));
 
+    $properties['traffic'] = DataDefinition::create('integer')
+      ->setLabel(new TranslatableMarkup('Traffic Layer'));
+
+    $properties['marker_icon'] = DataDefinition::create('string')
+      ->setLabel(new TranslatableMarkup('Custom marker'));
+
     $properties['controls'] = DataDefinition::create('integer')
       ->setLabel(new TranslatableMarkup('Show controls'));
 

src/Plugin/Field/FieldWidget/GoogleMapFieldDefaultWidget.php

@@ -124,6 +124,22 @@ class GoogleMapFieldDefaultWidget extends WidgetBase {
       ],
     ];
 
+    $element['traffic'] = [
+      '#type' => 'hidden',
+      '#default_value' => isset($items[$delta]->traffic) ? $items[$delta]->traffic : "",
+      '#attributes' => [
+        'data-traffic-delta' => $instance_delta,
+      ],
+    ];
+
+    $element['marker_icon'] = [
+      '#type' => 'hidden',
+      '#default_value' => isset($items[$delta]->marker_icon) ? $items[$delta]->marker_icon : "",
+      '#attributes' => [
+        'data-marker-icon-delta' => $instance_delta,
+      ],
+    ];
+
     $element['controls'] = [
       '#type' => 'hidden',
       '#default_value' => isset($items[$delta]->controls) ? $items[$delta]->controls : "1",

templates/google_map_field.html.twig

@@ -8,5 +8,5 @@
   {% if showInfowindow %}
   <div class="map-infowindow" style="display:none;">{{ infowindow }}</div>
   {% endif %}
-  <div class="map-container" style="width:{{ width }};height:{{ height }};" data-controls-show="{{ show_controls }}" data-marker-show="{{ show_marker }}" data-type="{{ type }}" data-lat="{{ lat }}" data-lon="{{ lon }}" data-zoom="{{ zoom }}" data-infowindow="{{ showInfowindow }}"></div>
+  <div class="map-container" style="width:{{ width }};height:{{ height }};" data-controls-show="{{ show_controls }}" data-traffic="{{ traffic }}" data-marker-show="{{ show_marker }}" data-marker-icon="{{ marker_icon }}" data-type="{{ type }}" data-lat="{{ lat }}" data-lon="{{ lon }}" data-zoom="{{ zoom }}" data-infowindow="{{ showInfowindow }}"></div>
 </section>