I have this jquery code that i run when the mounted hook runs
mounted() {
this.$progress.finish();
var geocoder = new google.maps.Geocoder();
var marker = null;
var map = null;
function initialize() {
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = -1.286389;
var longitude = 36.817223;
var zoom = 16;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
if (marker && marker.getMap) marker.setMap(map);
marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(marker) {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
this.property_coordinates = 'hello world';
});
}
initialize();
$('#findbutton').click(function (e) {
var address = $("#Postcode").val();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
$(latitude).val(marker.getPosition().lat());
$(longitude).val(marker.getPosition().lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
e.preventDefault();
});
},
I want to grab the coordinates when the marker is dragged and this should updat ethe v-model variable property_coordinates
google.maps.event.addListener(marker, 'dragend', function(marker) {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
this.property_coordinates = 'hello world';
});
This this.property_coordinates = 'hello world';
does not update the v-model. How can i update the v-model from within jquery code?
There is nothing special required to update the property_coordinates
property from JQuery or other javascript outside of Vue.
In this case, this
in the event function is not bound to the vue component.
An arrow function will maintain this
from he outer scope
google.maps.event.addListener(marker, 'dragend', (marker) => {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
this.property_coordinates = 'hello world';
});
Otherwise you can create a reference to the outer vue this
const component = this
google.maps.event.addListener(marker, 'dragend', function (marker) {
component.property_coordinates = 'hello world';
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments