diff --git a/geolocation.libraries.yml b/geolocation.libraries.yml
new file mode 100644
index 0000000..0276eee
--- /dev/null
+++ b/geolocation.libraries.yml
@@ -0,0 +1,24 @@
+geolocation.widgets.googlegeocoder:
+  version: 1.x
+  css:
+    theme:
+      css/geolocation-googlegeocoder-widget.css: {}
+  js:
+    //maps.googleapis.com/maps/api/js?libraries=places: { type: external }
+    js/geolocation-googlegeocoder-widget.js: { scope: footer }
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/drupalSettings
+    - core/jquery.once
+geolocation.widgets.html5:
+  version: 1.x
+  css:
+    theme:
+      css/geolocation-html5-widget.css: {}
+  js:
+    js/geolocation-html5-widget.js: { scope: footer }
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/drupalSettings
diff --git a/js/geolocation-googlegeocoder-widget.js b/js/geolocation-googlegeocoder-widget.js
index d236071..b292f2e 100644
--- a/js/geolocation-googlegeocoder-widget.js
+++ b/js/geolocation-googlegeocoder-widget.js
@@ -27,7 +27,7 @@
       $.each(drupalSettings.geolocation.defaults, function(canvasId, mapDefaults) {
 
         // Process every map canvas once. This will also add 'map-canvas-processed' class.
-        $("#" + canvasId).once('map-canvas', function() {
+        $("#" + canvasId).once().each(function() {
 
           var $mapCanvas = $(this);
           var $hiddenLat = $mapCanvas.siblings(".geolocation-hidden-lat");
diff --git a/src/Plugin/Field/FieldWidget/GeolocationGooglegeocoderWidget.php b/src/Plugin/Field/FieldWidget/GeolocationGooglegeocoderWidget.php
index 0b190de..fb4b41e 100644
--- a/src/Plugin/Field/FieldWidget/GeolocationGooglegeocoderWidget.php
+++ b/src/Plugin/Field/FieldWidget/GeolocationGooglegeocoderWidget.php
@@ -1,5 +1,4 @@
 <?php
-
 /**
  * @file
  * Contains \Drupal\geolocation\Plugin\Field\FieldWidget\GeolocationGooglegeocoderWidget.
@@ -41,58 +40,54 @@ class GeolocationGooglegeocoderWidget extends WidgetBase {
     $lng_default_value = isset($lng) ? $lng : NULL;
 
     // The map container.
-    $element['map_canvas'] = array(
-      '#markup' => '<div id="' . $canvas_id . '" class="geolocation-map-canvas"></div>',
-    );
+    $element['map_canvas'] = [
+      '#type' => 'html_tag',
+      '#tag' => 'div',
+      '#attributes' => [
+        'id' => $canvas_id,
+        'class' => ['geolocation-map-canvas'],
+      ],
+    ];
 
     // Hidden lat,lng input fields.
-    $element['lat'] = array(
+    $element['lat'] = [
       '#type' => 'hidden',
       '#default_value' => $lat_default_value,
-      '#attributes' => array('class' => array('geolocation-hidden-lat')),
-    );
-    $element['lng'] = array(
+      '#attributes' => ['class' => ['geolocation-hidden-lat']],
+    ];
+    $element['lng'] = [
       '#type' => 'hidden',
       '#default_value' => $lng_default_value,
-      '#attributes' => array('class' => array('geolocation-hidden-lng')),
-    );
-
-    // Attach css
-    $element['#attached']['css'][] = drupal_get_path('module', 'geolocation') . '/css/geolocation-googlegeocoder-widget.css';
-
-    // Attach js
-    $element['#attached']['js'][] = array(
-      'data' => '//maps.googleapis.com/maps/api/js?libraries=places',
-      'type' => 'external',
-    );
-    $element['#attached']['js'][] = array(
-      'data' => drupal_get_path('module', 'geolocation') . '/js/geolocation-googlegeocoder-widget.js',
-      'type' => 'file',
-      'scope' => 'footer',
-    );
+      '#attributes' => ['class' => ['geolocation-hidden-lng']],
+    ];
 
     // Make default values available as javascript settings. Example: To access
     // the default lat value via javascript use: drupalSettings.mapDefaults.lat
-    $data = array(
-      'defaults' => array(
-        "$canvas_id" => array(
+    $data = [
+      'defaults' => [
+        "$canvas_id" => [
           'lat' => $lat_default_value,
           'lng' => $lng_default_value,
-        ),
-      ),
-    );
-    $element['map']['#attached']['js'][] = array(
-      'data' => array('geolocation' => $data),
-      'type' => 'setting',
-    );
+        ],
+      ],
+    ];
+
+    // Attach widget library and js settings
+    $element['#attached'] = [
+      'library' => [
+        'geolocation/geolocation.widgets.googlegeocoder',
+      ],
+      'drupalSettings' => [
+        'geolocation' => $data
+      ],
+    ];
 
     // Wrap the whole form in a container.
-    $element += array(
+    $element += [
       '#type' => 'item',
       '#title' => $element['#title'],
-    );
+    ];
 
     return $element;
   }
-
 }
diff --git a/src/Plugin/Field/FieldWidget/GeolocationHTML5Widget.php b/src/Plugin/Field/FieldWidget/GeolocationHTML5Widget.php
index bf16871..70c3d5d 100644
--- a/src/Plugin/Field/FieldWidget/GeolocationHTML5Widget.php
+++ b/src/Plugin/Field/FieldWidget/GeolocationHTML5Widget.php
@@ -1,5 +1,4 @@
 <?php
-
 /**
  * @file
  * Contains \Drupal\geolocation\Plugin\Field\FieldWidget\GeolocationHTML5Widget.
@@ -44,39 +43,35 @@ class GeolocationHTML5Widget extends WidgetBase {
     $button_html .= '<div class="clear"></div>';
     $button_html .= '</div>';
 
-    $element['get_location'] = array(
+    $element['get_location'] = [
       '#markup' => $button_html,
-    );
+    ];
 
     // Hidden lat,lng input fields.
-    $element['lat'] = array(
+    $element['lat'] = [
       '#type' => 'hidden',
       '#default_value' => $lat_default_value,
-      '#attributes' => array('class' => array('geolocation-hidden-lat')),
-    );
-    $element['lng'] = array(
+      '#attributes' => ['class' => ['geolocation-hidden-lat']],
+    ];
+    $element['lng'] = [
       '#type' => 'hidden',
       '#default_value' => $lng_default_value,
-      '#attributes' => array('class' => array('geolocation-hidden-lng')),
-    );
-
-    // Attach css
-    $element['#attached']['css'][] = drupal_get_path('module', 'geolocation') . '/css/geolocation-html5-widget.css';
+      '#attributes' => ['class' => ['geolocation-hidden-lng']],
+    ];
 
-    // Attach js
-    $element['#attached']['js'][] = array(
-      'data' => drupal_get_path('module', 'geolocation') . '/js/geolocation-html5-widget.js',
-      'type' => 'file',
-      'scope' => 'footer',
-    );
+    // Attach the html5 library.
+    $element['#attached'] = [
+      'library' => [
+        'geolocation/geolocation.widgets.html5',
+      ],
+    ];
 
     // Wrap the whole form in a container.
-    $element += array(
+    $element += [
       '#type' => 'item',
       '#title' => $element['#title'],
-    );
+    ];
 
     return $element;
   }
-
 }