Two coordinates fields doesn't work together, you have to use only one field of type coordinates.

[seddik]

Version information

• Laravel: v7.21.1
• Voyager: v 1.4
• PHP: 7.3
• Database: mysql 5.7

Description

A clear and concise description of what the bug is.

Steps To Reproduce

Steps to reproduce the behavior:

1. Database create 02 fields of type POINT
2. BREAD set theses 02 fields type as Coordinates
3. Add Spatial in model for both fields
4. Browse -> Create -> lat/lon is empty, also the map doesn't show on both of them
5. When I use only one field the map + lat/lon shows normally

Expected behavior

I should have two maps and two coords centered in the point set in config/voyager.php

Screenshots

Additional context

[MrCrayon]

@seddik Can you try if overriding formfield template with this changes solves it?

https://github.com/the-control-group/voyager/blob/v1.4.2/resources/views/formfields/coordinates.blade.php

@ -12,7 +12,7 @@
    $showLatLng = $showLatLng ? 'true' : 'false';
@endphp

-<div id="coordinates-formfield">
+<div id="coordinates-formfield-{{ $row->field }}">
    <coordinates
        inline-template
        ref="coordinates"
@ -202,6 +202,6 @@
            }
        });

-        var gMapVm = new Vue({ el: '#coordinates-formfield' });
+        var gMapVm = new Vue({ el: '#coordinates-formfield-{{ $row->field }}' });
    </script>
@endpush

[MrCrayon]

Or better like this to solve the double inclusion:

@ -12,7 +12,7 @@
    $showLatLng = $showLatLng ? 'true' : 'false';
@endphp

-<div id="coordinates-formfield">
+<div id="coordinates-formfield-{{ $row->field }}">
    <coordinates
        inline-template
        ref="coordinates"
@ -107,8 +107,13 @@
            },
            mounted() {
                // Load Google Maps script
+                const apiUrl = 'https://maps.googleapis.com/maps/api/js?key='+this.apiKey+'&callback=gMapVm.$refs.coordinates.initMap&libraries=places';
+                if (document.querySelectorAll('[src="' + apiUrl + '"]').length > 0) {
+                    return;
+                }
+
                let gMapScript = document.createElement('script');
-                gMapScript.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key='+this.apiKey+'&callback=gMapVm.$refs.coordinates.initMap&libraries=places');
+                gMapScript.setAttribute('src', apiUrl);
                document.head.appendChild(gMapScript);
            },
            methods: {
@ -202,6 +207,6 @@
            }
        });

-        var gMapVm = new Vue({ el: '#coordinates-formfield' });
+        var gMapVm = new Vue({ el: '#coordinates-formfield-{{ $row->field }}' });
    </script>
@endpush

[seddik]

@MrCrayon that didn't fix the problem, I've got the upper only, and the lower fields working with it. on the other hand there is no javascript error.

could it be they need a separate gmap initialization function in the URL, by field I mean.

[MrCrayon]

@seddik yes, I think also ref="coordinates" and wherever is used needs a unique identifier, you can experiment with that until I find the time to check it.

[lamualfa]

Any news about this problem?