I am using Laravel/livewire. I want to get the latitude and longitude from google map and show the value in inputs:
<input id="latBranch" wire:model="lat" val="">
<input id="longBranch" wire:model="long" val="">
Using below google codes and it works fine when the page loads:
...
infoWindow.setPosition(pos);
document.getElementById("latBranch").value = position.coords.latitude;
document.getElementById("longBranch").value = position.coords.longitude;
...
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latBranch").value = event.latLng.lat();
document.getElementById("longBranch").value = event.latLng.lng();
infoWindow.open(map, marker);
});
...
But the problem is that when I select an option from below select then the longitude and latitude inputs gets empty:
<select required wire:model="branchCountry">
@foreach ($countries as $row)
<option value="{{$row->id}}">{{ $row->countryname }}</option>
@endforeach
</select>
The above select option gets the country Id and pass it to livewire controller to load provinces as below:
public function updatedbranchCountry()
{
if($this->branchCountry != '') {
$this->provinces = Province::orderby('provincename', 'asc')->where('country_id', $this->branchCountry)->get();
}
}
My question is that how can I keep the longitude and latitude in the inputs when the I select or change the option of the select element.
To solve this problem I added the Longitude and Latitude in a livewire emit as below:
Livewire.emit('getLatitudeForInput', event.latLng.lat());
Livewire.emit('getLongitudeForInput', event.latLng.lng());
and then in livewire controller I used listener to get the value as below:
protected $listeners = ['getLatitudeForInput','getLongitudeForInput'];
public function getLatitudeForInput($value)
{
if(!is_null($value))
$this->lat = $value;
}
public function getLongitudeForInput($value)
{
if(!is_null($value))
$this->long = $value;
}
Then I used those values.