Re-render cornford/googlmapper on Livewire - laravel-livewire

Question

I'm starting the map with the coordinates (0, 0) and i have a list of available coordinates, and when i click on one of them i fire a function that updates map coordinates to re-center it.
I'll past the code from the controller:
class myClass extends Component
{
public $latitude = '0.0';
public $longitude = '0.0';
public function centerMap($id)
{
$dg = DeliveryGuyDetail::find($id);
$this->latitude = $dg->delivery_lat;
$this->longitude = $dg->delivery_long;
}
public function render()
{
Mapper::map($this->latitude, $this->longitude, ['zoom' => 18, 'async' => true, 'clusters' => ['size' => 20, 'center' => true], 'draggable' => true ]);
return view('livewire.manager.delivery-map');
}
}
The goal is to re-center the map after the user click on the available coordinates on frontend and fire the function "centerMap" to recenter the map. But when that happens the map disappear.
Any advice on that?
Thanks in advance.

Answer 1

Try calling the render methiod in the component:
public function centerMap($id)
{
$dg = DeliveryGuyDetail::find($id);
$this->latitude = $dg->delivery_lat;
$this->longitude = $dg->delivery_long;
$this->render();
}
You could create another method as well if this is a child component:
// Parent livewire component
public function reRenderParent()
{
$this->render();
}
Calling it in the child component:
$this->emit('reRenderParent');
Reinitializing a select2
$(document).ready(function() {
window.initSelectDrop=()=>{
$('#salesperson_id').select2({
placeholder: '{{ __('locale.Select ....') }}',
allowClear: true});
}
initSelectDrop();
$('#salesperson_id').on('change', function (e) {
livewire.emit('salesperson_id', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectDrop();
});
});