From aac1bc64d7fd73507e4870744a9d6797adaa1e82 Mon Sep 17 00:00:00 2001 From: Thomas Templeton Date: Mon, 2 Oct 2023 19:59:43 +1100 Subject: [PATCH] Fix maps not loading in Matrix/Neo blocks after first new block --- .../dist/js/EntryCoordinates.js | 20 +++++++++++++------ .../fields/EntryCoordinates_input.twig | 2 +- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js b/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js index 9a4fec6..778d3b7 100644 --- a/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js +++ b/src/assetbundles/entrycoordinatesfield/dist/js/EntryCoordinates.js @@ -77,12 +77,13 @@ class CoordinatesField { this.options.zoomLevel = options.defaultZoomLevel; } - this.searchInput = document.querySelector('.location-search-' + this.options.suffix); - this.coordsInput = document.querySelector('.location-coords-' + this.options.suffix); - this.addressInput = document.querySelector('.location-address-' + this.options.suffix); - this.zoomInput = document.querySelector('.location-zoom-' + this.options.suffix); + const container = document.getElementById(this.options.namespace + '-field'); + this.searchInput = container.querySelector('.location-search-' + this.options.suffix); + this.coordsInput = container.querySelector('.location-coords-' + this.options.suffix); + this.addressInput = container.querySelector('.location-address-' + this.options.suffix); + this.zoomInput = container.querySelector('.location-zoom-' + this.options.suffix); - this.mapElement = document.querySelector('.fields-map-' + this.options.suffix); + this.mapElement = container.querySelector('.fields-map-' + this.options.suffix); } // Deletes all markers in the array by removing references to them. @@ -273,7 +274,14 @@ class EntryCoordinatesContainer { this.loadMapsScript(this.apiKey ?? options.apiKey) } - this.markers.push(new CoordinatesField(name, options)); + const marker = new CoordinatesField(name, options); + + // Ensure markers created after the Google Maps API script is loaded are still initialised + if (typeof google !== 'undefined') { + marker.initThisMap(); + } + + this.markers.push(marker); return true; } diff --git a/src/templates/_components/fields/EntryCoordinates_input.twig b/src/templates/_components/fields/EntryCoordinates_input.twig index e602258..b2043d2 100644 --- a/src/templates/_components/fields/EntryCoordinates_input.twig +++ b/src/templates/_components/fields/EntryCoordinates_input.twig @@ -82,5 +82,5 @@ {% js %} EntryCoordinates.setApiKey('{{ googleApiKey }}'); - EntryCoordinates.addField('{{ name }}', { suffix: '{{ suffix }}', originalLocation: '{{ value.coordinates }}', zoomLevel: '{{ value.zoomLevel }}', defaultCenterCoordinates: '{{ defaultCenterCoordinates }}', defaultZoomLevel: '{{ defaultZoomLevel ?? 1 }}', apiKey: '{{ googleApiKey }}'}); + EntryCoordinates.addField('{{ name }}', { namespace: '{{ namespacedId }}', suffix: '{{ suffix }}', originalLocation: '{{ value.coordinates }}', zoomLevel: '{{ value.zoomLevel }}', defaultCenterCoordinates: '{{ defaultCenterCoordinates }}', defaultZoomLevel: '{{ defaultZoomLevel ?? 1 }}', apiKey: '{{ googleApiKey }}'}); {% endjs %} \ No newline at end of file