From 0d6af22fa1be1753cc985b669d4ed55d9984b294 Mon Sep 17 00:00:00 2001
From: Sam Leighton <sam@newism.com.au>
Date: Thu, 23 Jul 2020 09:40:19 +1000
Subject: [PATCH 1/2] update readme to note API requirements of map

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7f028f1..6df40aa 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ Address field powered by Google's dataset ([commerceguys/addressing](https://git
 Features:
 
 * Auto-complete powered by Google Place API
+* Map powered by Google Maps Javascript API and Google Maps Geocoding API
 * Address form formatting based on country powered by [commerceguys/addressing](https://github.com/commerceguys/addressing)
 * Validation / Geo-coding on submission (TODO)
 
@@ -143,10 +144,10 @@ of the Composer documentation.
 ### Step 2: Install
 
 Install plugin in the Craft Control Panel under Settings > Plugins.
- 
+
 ## Configuration
 
-The plugin comes with a config.php file that defines some sensible defaults. 
+The plugin comes with a config.php file that defines some sensible defaults.
 
 Copy `src/config.php` to `CRAFT_CONFIG_PATH` and rename the file to `nsm-fields.php`.
 

From ca6e742df90dbcc727f74925db5a04737e2efef2 Mon Sep 17 00:00:00 2001
From: Sam Leighton <sam@newism.com.au>
Date: Thu, 23 Jul 2020 12:11:43 +1000
Subject: [PATCH 2/2] fix error with google instantiation

---
 .../addressfield/dist/js/Address.js           | 520 ++++++++++--------
 src/fields/Address.php                        |   1 +
 .../fieldtypes/Address/settings.twig          |   2 +
 3 files changed, 280 insertions(+), 243 deletions(-)

diff --git a/src/assetbundles/addressfield/dist/js/Address.js b/src/assetbundles/addressfield/dist/js/Address.js
index 6951ef8..e0fb777 100644
--- a/src/assetbundles/addressfield/dist/js/Address.js
+++ b/src/assetbundles/addressfield/dist/js/Address.js
@@ -10,249 +10,283 @@
  * @since     1.0.0NsmFieldsAddress
  */
 
-;(function ($, Craft, window, document, undefined) {
-    // We need to create a callback for the Google Maps API to use when it has loaded
-    window.googleMapsPlacesApiLoaded = window.googleMapsPlacesApiLoaded || false;
-    window.googleMapsPlacesApiLoadedCallback = function () {
-        window.googleMapsPlacesApiLoaded = true;
-        document.body.dispatchEvent(new Event('googleMapsPlacesApiLoaded'));
-    };
-
-    var pluginName = 'NsmFieldsAddress',
-        defaults = {};
-
-    // Plugin constructor
-    function Plugin (element, options) {
-        this.$element = $(element);
-        this.options = $.extend({}, defaults, options);
-        this._defaults = defaults;
-        this._name = pluginName;
-        this.init();
-    }
-
-    Plugin.prototype = {
-
-        getElement: function (element) {
-            return this.$element.find('#' + this.options.namespace + '-' + element);
-        },
-
-        init: function (id) {
-
-            // Init country code
-            this.$addressFieldsContainer = this.$element.find('.nsmFields-address-addressFieldsContainer');
-            this.$autoCompleteInput = this.getElement('autoComplete');
-            this.$countryCodeInput = this.getElement('countryCode');
-            this.currentCountryCode = this.$countryCodeInput.val();
-            this.$countryCodeInput.on('change', $.proxy(this.refreshCountry, this));
-
-            // Add loading state
-            this.$spinner = $('<div class="spinner hidden"/>').insertAfter(this.$countryCodeInput.parent());
-
-            this.initMap();
-            if (window.googleMapsPlacesApiLoaded) {
-                this.initAutocomplete();
-            } else {
-                $('body').on('googleMapsPlacesApiLoaded', $.proxy(this.initAutocomplete, this));
-            }
-        },
-
-        initMap: function () {
-            this.$mapContainer = this.$element.find('.nsmFields-address-map')
-            if(this.$mapContainer.length){
-                this.$map = new google.maps.Map(this.$mapContainer[0], {
-                    center: { lat: parseFloat(this.getElement('latitude').val() || this.$defaultMapCenter.lat), lng: parseFloat(this.getElement('longitude').val() || this.$defaultMapCenter.lng) },
-                    zoom: 8
-                });
-
-                this.$geocoder = new google.maps.Geocoder();
-
-                this.initMarker();
-            }
-        },
-
-        initMarker: function () {
-            var _this = this;
-            var pos = new google.maps.LatLng(parseFloat(this.getElement('latitude').val() || this.$defaultMapCenter.lat), parseFloat(this.getElement('longitude').val() || this.$defaultMapCenter.lng));
-
-            this.$marker = new google.maps.Marker({
-                position: pos,
-                draggable: true,
-                animation: google.maps.Animation.DROP,
-                map: this.$map
-            });
-
-
-            google.maps.event.addListener(this.$marker, 'click', function(){
-                _this.updateMarkerPosition();
-            });
-
-            google.maps.event.addListener(this.$marker, 'dragend', function(){
-                _this.updateMarkerPosition();
-            });
-        },
-
-        updateMarkerPosition: function () {
-            var _this = this;
-            _this.$geocoder.geocode({ location: _this.$marker.getPosition() }, function(results, status) {
-                if (status === "OK") {
-                    if (results[0]) {
-                    _this.mapChanged(results[0])
-                    } else {
-                    window.alert("No results found");
-                    }
-                } else {
-                    window.alert("Geocoder failed due to: " + status);
-                }
-            });
-        },
-
-        initAutocomplete: function () {
-            this.$autoCompleteInput = this.$element.find('#' + this.options.namespace + '-autoComplete');
-
-            if (this.$autoCompleteInput.length) {
-
-                this.autocomplete = new google.maps.places.Autocomplete(
-                    this.$autoCompleteInput[0],
-                    this.options.fieldSettings.autoCompleteConfiguration,
-                );
-
-                google.maps.event.addDomListener(this.$autoCompleteInput[0], 'keydown', function (e) {
-                    if (e.keyCode === 13) {
-                        e.preventDefault();
-                    }
-                });
-
-                // When the user selects an address from the dropdown, populate the address
-                // fields in the form.
-                this.autocomplete.addListener('place_changed', $.proxy(this.placeChanged, this));
-            }
-        },
-
-        refreshCountry: function () {
-            var newCountryCode = this.$countryCodeInput.val(),
-                jqXHR;
-
-            if (!newCountryCode) {
-                this.$addressFieldsContainer.hide();
-            }
-
-            if (this.currentCountryCode !== newCountryCode) {
-                this.clearInputs();
-            }
-
-            this.currentCountryCode = newCountryCode;
-            this.$spinner.removeClass('hidden');
-
-            jqXHR = Craft.postActionRequest(
-                'entries/switch-entry-type',
-                Craft.cp.$primaryForm.serialize(),
-                $.proxy(function (response, textStatus) {
-                    var newHtml;
-                    this.$spinner.addClass('hidden');
-                    if (textStatus === 'success') {
-                        newHtml = $(response.fieldsHtml).find('#' + this.options.namespace + '-field .nsmFields-address-addressFieldsContainer');
-                        newHtml.toggle(!!this.$countryCodeInput.val());
-                        this.$addressFieldsContainer.replaceWith(newHtml);
-                        this.$addressFieldsContainer = newHtml;
-                        Craft.initUiElements(this.$addressFieldsContainer);
-                    }
-                }, this));
-
-            return jqXHR;
-        },
-
-        clearInputs: function () {
-            this.getElement('addressLine1').val('');
-            this.getElement('addressLine2').val('');
-            this.getElement('locality').val('');
-            this.getElement('administrativeArea').val('');
-            this.getElement('postalCode').val('');
-            this.getElement('placeData').val('');
-            this.getElement('latitude').val('');
-            this.getElement('longitude').val('');
-            this.getElement('mapUrl').val('');
-        },
-
-        placeChanged: function () {
-            var _this = this;
-            var place = _this.autocomplete.getPlace();
-            var normalisedPlace = this.normalisePlace(place);
-            var currentCountryCode = this.getElement('countryCode').val();
-            var newCountryCode = normalisedPlace.countryCode || '';
-
-            this.$autoCompleteInput.val('');
-            this.getElement('countryCode').val(newCountryCode);
-
-            $.when((currentCountryCode === newCountryCode) || this.refreshCountry()).then(function () {
-                _this.getElement('addressLine2').val((normalisedPlace.streetNumber || '') + ' ' + (normalisedPlace.route || ''));
-                _this.getElement('locality').val(normalisedPlace.locality);
-                _this.getElement('administrativeArea').val(normalisedPlace.administrativeAreaCode);
-                _this.getElement('postalCode').val(normalisedPlace.postalCode);
-                _this.getElement('placeData').val(JSON.stringify(place, null, 4));
-                _this.getElement('latitude').val(normalisedPlace.latitude);
-                _this.getElement('longitude').val(normalisedPlace.longitude);
-                _this.getElement('mapUrl').val(normalisedPlace.mapUrl);
-            });
-        },
-
-        mapChanged: function (place) {
-            var _this = this;
-            var normalisedPlace = this.normalisePlace(place);
-
-            _this.getElement('latitude').val(normalisedPlace.latitude);
-            _this.getElement('longitude').val(normalisedPlace.longitude);
-          },
-
-        normalisePlace: function (result) {
-            var normalised = {};
-
-            normalised.latitude = result.geometry.location.lat;
-            normalised.longitude = result.geometry.location.lng;
-            normalised.mapUrl = result.url || '';
-
-            for (var i in result.address_components) {
-                for (var j in result.address_components[i].types) {
-                    switch (result.address_components[i].types[j]) {
-                        case 'street_number':
-                            normalised.streetNumber = result.address_components[i].long_name;
-                            break;
-                        case 'route':
-                            normalised.route = result.address_components[i].short_name;
-                            break;
-                        case 'locality':
-                            normalised.locality = result.address_components[i].long_name;
-                            break;
-                        case 'administrative_area_level_1':
-                            normalised.administrativeArea = result.address_components[i].long_name;
-                            normalised.administrativeAreaCode = result.address_components[i].short_name;
-                            // Normalise Japan
-                            normalised.administrativeAreaCode = normalised.administrativeAreaCode.replace(' Prefecture', '');
-                            normalised.administrativeAreaCode = normalised.administrativeAreaCode.replace(' Parish', '');
-                            break;
-                        case 'postal_code':
-                            normalised.postalCode = result.address_components[i].long_name;
-                            break;
-                        case 'country':
-                            normalised.country = result.address_components[i].long_name;
-                            normalised.countryCode = result.address_components[i].short_name;
-                            break;
-                    }
-                }
-            }
-
-            return normalised;
-        },
-    };
-
-    // A really lightweight plugin wrapper around the constructor,
-    // preventing against multiple instantiations
-    $.fn[pluginName] = function (options) {
-        return this.each(function () {
-            if (!$.data(this, 'plugin_' + pluginName)) {
-                $.data(this, 'plugin_' + pluginName,
-                    new Plugin(this, options));
-            }
+(function ($, Craft, window, document, undefined) {
+  // We need to create a callback for the Google Maps API to use when it has loaded
+  window.googleMapsPlacesApiLoaded = window.googleMapsPlacesApiLoaded || false;
+  window.googleMapsPlacesApiLoadedCallback = function () {
+    window.googleMapsPlacesApiLoaded = true;
+    document.body.dispatchEvent(new Event('googleMapsPlacesApiLoaded'));
+  };
+
+  var pluginName = 'NsmFieldsAddress',
+    defaults = {};
+
+  // Plugin constructor
+  function Plugin (element, options) {
+    this.$element = $(element);
+    this.options = $.extend({}, defaults, options);
+    this._defaults = defaults;
+    this._name = pluginName;
+    this.init();
+  }
+
+  Plugin.prototype = {
+
+    getElement: function (element) {
+      return this.$element.find('#' + this.options.namespace + '-' + element);
+    },
+
+    init: function (id) {
+
+      // Init country code
+      this.$addressFieldsContainer = this.$element.find('.nsmFields-address-addressFieldsContainer');
+      this.$autoCompleteInput = this.getElement('autoComplete');
+      this.$countryCodeInput = this.getElement('countryCode');
+      this.currentCountryCode = this.$countryCodeInput.val();
+      this.currentCountryCodeName = this.$countryCodeInput.find('option[value="'+this.currentCountryCode+'"]').text();
+      this.$countryCodeInput.on('change', $.proxy(this.refreshCountry, this));
+      this.$mapContainer = this.$element.find('.nsmFields-address-map')
+
+
+      // Add loading state
+      this.$spinner = $('<div class="spinner hidden"/>').insertAfter(this.$countryCodeInput.parent());
+
+      if (window.googleMapsPlacesApiLoaded) {
+        this.initGoogleServices();
+      } else {
+        $('body').on('googleMapsPlacesApiLoaded', $.proxy(this.initGoogleServices, this));
+      }
+    },
+
+    initGoogleServices: function () {
+      var _this = this;
+      _this.initAutocomplete();
+      if(_this.$mapContainer.length){
+        _this.$geocoder = new google.maps.Geocoder();
+        _this.$defaultMapCenter = { lat: -32.8781082, lng: 151.7210444 };
+        _this.geocode({ address: _this.currentCountryCodeName }, function(results){
+          _this.$defaultMapCenter = { lat: results.geometry.location.lat(), lng: results.geometry.location.lng() };
+          _this.initMap();
         });
-    };
+      }
+    },
+
+    initMap: function () {
+      this.$map = new google.maps.Map(this.$mapContainer[0], {
+        center: { lat: parseFloat(this.getElement('latitude').val() || this.$defaultMapCenter.lat), lng: parseFloat(this.getElement('longitude').val() || this.$defaultMapCenter.lng) },
+        zoom: 8
+      });
+
+      this.initMarker();
+    },
+
+    initMarker: function () {
+      var _this = this;
+      var pos = new google.maps.LatLng(parseFloat(this.getElement('latitude').val() || this.$defaultMapCenter.lat), parseFloat(this.getElement('longitude').val() || this.$defaultMapCenter.lng));
+
+      this.$marker = new google.maps.Marker({
+        position: pos,
+        draggable: true,
+        animation: google.maps.Animation.DROP,
+        map: this.$map
+      });
+
+
+      google.maps.event.addListener(this.$marker, 'click', function(){
+        _this.updateMarkerPosition();
+      });
+
+      google.maps.event.addListener(this.$marker, 'dragend', function(){
+        _this.updateMarkerPosition();
+      });
+    },
+
+    updateMarkerPosition: function () {
+      var _this = this;
+      _this.geocode({ location: _this.$marker.getPosition() }, function(results){
+        _this.mapChanged(results)
+      });
+    },
+
+    initAutocomplete: function () {
+      this.$autoCompleteInput = this.$element.find('#' + this.options.namespace + '-autoComplete');
+
+      if (this.$autoCompleteInput.length) {
+
+        this.autocomplete = new google.maps.places.Autocomplete(
+          this.$autoCompleteInput[0],
+          this.options.fieldSettings.autoCompleteConfiguration,
+        );
+
+        google.maps.event.addDomListener(this.$autoCompleteInput[0], 'keydown', function (e) {
+          if (e.keyCode === 13) {
+            e.preventDefault();
+          }
+        });
+
+        // When the user selects an address from the dropdown, populate the address
+        // fields in the form.
+        this.autocomplete.addListener('place_changed', $.proxy(this.placeChanged, this));
+      }
+    },
+
+    refreshCountry: function () {
+      var newCountryCode = this.$countryCodeInput.val(),
+        jqXHR;
+
+      var newCountryCodeName = this.$countryCodeInput.find('option[value="'+newCountryCode+'"]').text();
+
+      if (!newCountryCode) {
+        this.$addressFieldsContainer.hide();
+      }
+
+      if (this.currentCountryCode !== newCountryCode) {
+        this.clearInputs();
+        this.recenterMap(newCountryCodeName);
+      }
+
+      this.currentCountryCode = newCountryCode;
+      this.$spinner.removeClass('hidden');
+
+      jqXHR = Craft.postActionRequest(
+        'entries/switch-entry-type',
+        Craft.cp.$primaryForm.serialize(),
+        $.proxy(function (response, textStatus) {
+          var newHtml;
+          this.$spinner.addClass('hidden');
+          if (textStatus === 'success') {
+            newHtml = $(response.fieldsHtml).find('#' + this.options.namespace + '-field .nsmFields-address-addressFieldsContainer');
+            newHtml.toggle(!!this.$countryCodeInput.val());
+            this.$addressFieldsContainer.replaceWith(newHtml);
+            this.$addressFieldsContainer = newHtml;
+            Craft.initUiElements(this.$addressFieldsContainer);
+          }
+        }, this));
+
+      return jqXHR;
+    },
+
+    recenterMap: function (newCountryCodeName) {
+      var _this = this;
+      if(_this.$map && _this.$marker){
+        _this.geocode({ address: newCountryCodeName }, function(results){
+          _this.$map.setCenter({ lat: results.geometry.location.lat(), lng: results.geometry.location.lng() })
+          _this.$marker.setPosition({ lat: results.geometry.location.lat(), lng: results.geometry.location.lng() })
+        });
+      }
+    },
+
+    geocode: function (query, resultsFunction){
+      var _this = this;
+      _this.$geocoder.geocode(query, function(results, status) {
+        if (status === "OK") {
+          if (results[0]) {
+            resultsFunction(results[0]);
+          } else {
+            window.alert("No Geocoding results found");
+          }
+        } else {
+          window.alert("Geocoder failed due to: " + status);
+        }
+      });
+    },
+
+    clearInputs: function () {
+      this.getElement('addressLine1').val('');
+      this.getElement('addressLine2').val('');
+      this.getElement('locality').val('');
+      this.getElement('administrativeArea').val('');
+      this.getElement('postalCode').val('');
+      this.getElement('placeData').val('');
+      this.getElement('latitude').val('');
+      this.getElement('longitude').val('');
+      this.getElement('mapUrl').val('');
+    },
+
+    placeChanged: function () {
+      var _this = this;
+      var place = _this.autocomplete.getPlace();
+      var normalisedPlace = this.normalisePlace(place);
+      var currentCountryCode = this.getElement('countryCode').val();
+      var newCountryCode = normalisedPlace.countryCode || '';
+
+      this.$autoCompleteInput.val('');
+      this.getElement('countryCode').val(newCountryCode);
+
+      $.when((currentCountryCode === newCountryCode) || this.refreshCountry()).then(function () {
+        _this.getElement('addressLine2').val((normalisedPlace.streetNumber || '') + ' ' + (normalisedPlace.route || ''));
+        _this.getElement('locality').val(normalisedPlace.locality);
+        _this.getElement('administrativeArea').val(normalisedPlace.administrativeAreaCode);
+        _this.getElement('postalCode').val(normalisedPlace.postalCode);
+        _this.getElement('placeData').val(JSON.stringify(place, null, 4));
+        _this.getElement('latitude').val(normalisedPlace.latitude);
+        _this.getElement('longitude').val(normalisedPlace.longitude);
+        _this.getElement('mapUrl').val(normalisedPlace.mapUrl);
+        if(_this.$map && _this.$marker){
+          _this.$map.setCenter({ lat: normalisedPlace.latitude(), lng: normalisedPlace.longitude() })
+          _this.$marker.setPosition({ lat: normalisedPlace.latitude(), lng: normalisedPlace.longitude() })
+        }
+      });
+    },
+
+    mapChanged: function (place) {
+      var _this = this;
+      var normalisedPlace = this.normalisePlace(place);
+
+      _this.getElement('latitude').val(normalisedPlace.latitude);
+      _this.getElement('longitude').val(normalisedPlace.longitude);
+    },
+
+    normalisePlace: function (result) {
+      var normalised = {};
+
+      normalised.latitude = result.geometry.location.lat;
+      normalised.longitude = result.geometry.location.lng;
+      normalised.mapUrl = result.url || '';
+
+      for (var i in result.address_components) {
+        for (var j in result.address_components[i].types) {
+          switch (result.address_components[i].types[j]) {
+          case 'street_number':
+            normalised.streetNumber = result.address_components[i].long_name;
+            break;
+          case 'route':
+            normalised.route = result.address_components[i].short_name;
+            break;
+          case 'locality':
+            normalised.locality = result.address_components[i].long_name;
+            break;
+          case 'administrative_area_level_1':
+            normalised.administrativeArea = result.address_components[i].long_name;
+            normalised.administrativeAreaCode = result.address_components[i].short_name;
+            // Normalise Japan
+            normalised.administrativeAreaCode = normalised.administrativeAreaCode.replace(' Prefecture', '');
+            normalised.administrativeAreaCode = normalised.administrativeAreaCode.replace(' Parish', '');
+            break;
+          case 'postal_code':
+            normalised.postalCode = result.address_components[i].long_name;
+            break;
+          case 'country':
+            normalised.country = result.address_components[i].long_name;
+            normalised.countryCode = result.address_components[i].short_name;
+            break;
+          }
+        }
+      }
+
+      return normalised;
+    },
+  };
+
+  // A really lightweight plugin wrapper around the constructor,
+  // preventing against multiple instantiations
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      if (!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName,
+          new Plugin(this, options));
+      }
+    });
+  };
 
 })(jQuery, Craft, window, document);
diff --git a/src/fields/Address.php b/src/fields/Address.php
index c522c6a..a557461 100644
--- a/src/fields/Address.php
+++ b/src/fields/Address.php
@@ -309,6 +309,7 @@ private function renderAddressFields($value)
             "\n",
             $formatTemplate
         );
+        $formatTemplate = str_replace(',', '', $formatTemplate);
 
         $formatRows = array_filter(
             array_map('trim', explode("\n", $formatTemplate))
diff --git a/src/templates/_components/fieldtypes/Address/settings.twig b/src/templates/_components/fieldtypes/Address/settings.twig
index 053a546..ee3e915 100644
--- a/src/templates/_components/fieldtypes/Address/settings.twig
+++ b/src/templates/_components/fieldtypes/Address/settings.twig
@@ -14,6 +14,7 @@
 
 {% import "_includes/forms" as forms %}
 
+<fieldset>
 {{ forms.selectField({
     label: 'Default Country',
     instructions: '',
@@ -99,4 +100,5 @@ See the [official documentation](https://developers.google.com/maps/documentatio
     value: field['autoCompleteConfiguration'],
     errors: field.getErrors('autoCompleteConfiguration')
 }) }}
+</fieldset>