<script>
function {{$map_id}}InitMap(config) {
return {
value: config?.value ?? {},
readableCoordinates: {},
{{$map_id}}init: function () {
console.log('initialize map');
const map = new google.maps.Map(this.$refs.{{$map_id}}map, {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
this.drawings = this.value;
const drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polyline']
},
polylineOptions: {
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}
});
drawingManager.setMap(map);
const alpineThis = this;
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
const that = this;
if (event.type === 'polyline') {
const completedPolyline = event.overlay;
const path = event.overlay.getPath();
const coordinates = path.getArray();
alpineThis.readableCoordinates = coordinates.map(latLng => {
return {lat: latLng.lat(), lng: latLng.lng()};
});
console.log('polyline completed');
}
});
this.$watch('readableCoordinates', () => {
this.value.push({
coordinates: this.readableCoordinates,
centerMarker: {
lat: 0,
lng: 0
},
type: 'type1',
color: '#FF0000'
})
console.log('coordinates changed');
});
}
}
}
</script>
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div
wire:ignore
x-data="{{$map_id}}InitMap({
value: $wire.entangle('{{ $getStatePath() }}'),
})"
x-init="{{$map_id}}init()"
>
<div
x-ref="{{$map_id}}map"
class="w-full" style="height: 500px; min-height: 30vh; z-index: 1 !important;">
</div>
</div>
</x-dynamic-component>
