I am using Livewire with GoogleMaps. From inside the Javascript I use
@this.set(‘vlat’,tlat);
To update my livewire Public $vlat. This works and it fires off
public function updatedvlat()
{
…
}
Which I can then handle. I am also then using the Google Geodecoder to get the address of the Lat/Lng, saving that to public $googaddr; along with its accuracy string.
I am showing these fields in my view, I can see that the fields are being updated, I can store them on the database, but when the view renders these fields are not updated in the view.
I can get the view to update by manually refreshing the browser. How do I get the view to update dynamically?
I am using the latest version of LiveWire.
My GoogleMaps Javascript.
function initMap() {
var myLatLng = {lat: {{ $Llat }}, lng: {{ $Llong }}};
var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 14,
center: {lat: {{ $Llat }}, lng: {{ $Llong }}}
});
var myMarker = new google.maps.Marker({
map: map,
draggable: true,
position: myLatLng
});
google.maps.event.addListener(myMarker, 'dragend', function(evt){
var posish = myMarker.getPosition();
var tlat = posish.lat();
var tlong = posish.lng();
@this.set('vlat',tlat);
@this.set('vlong',tlong);
});
var geocoder = new google.maps.Geocoder();
document.getElementById('geocode').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var tlat = results[0].geometry.location.lat();
var tlong = results[0].geometry.location.lng();
@this.set('vlat',tlat);
@this.set('vlong',tlong);
var myMarker = new google.maps.Marker({
map: resultsMap,
draggable: true,
position: results[0].geometry.location
});
google.maps.event.addListener(myMarker, 'dragend', function(evt){
var posish = myMarker.getPosition();
var tlat = posish.lat();
var tlong = posish.lng();
@this.set('vlat',tlat);
@this.set('vlong',tlong);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
The Backend PHP
public function updatedvlat()
{
$villa = villa::find($this->vid);
$villa->vlat = $this->vlat;
$villa->save();
}
public function updatedvlong()
{
$villa = villa::find($this->vid);
$villa->vlong = $this->vlong;
$GAddress="https://maps.googleapis.com/maps/api/geocode/json?latlng=" . $this->vlat . "," . $this->vlong . "&key=my googlemaps apikey";
$gmapsaddr=file_get_contents($GAddress);
$gmapaddr2=json_decode($gmapsaddr,true);
//dd($gmapaddr2);
$fhno= $gmapaddr2['results'][0]['formatted_address'];
$accr= $gmapaddr2['results'][0]['geometry']['location_type'];
$villa->googaddr = $fhno;
$villa->googaccr = $accr;
$googmsg = "Address from Googlemaps coordinates:" . $fhno . " accuracy:" . $accr;
$this->msg = $googmsg;
$villa->save();
}