new Vue({
el: '#app',
template: `
<div>
<input id="address" type="textbox" value="London, UK">
<input type="button" value="Geocode" @click="codeAddress()">
</div>
`,
data() {
return {
geocoder: null,
map: null,
marker: null,
infowindow: null
}
},
mounted() {
this.infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
})
google.maps.event.addDomListener(window, "load", this.initialize)
},
methods: {
initialize() {
this.geocoder = new google.maps.Geocoder();
let latlng = new google.maps.LatLng(51.5074, 0.1278)
let mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)
google.maps.event.addListener(this.map, 'click', () => {
this.infowindow.close()
});
},
geocodePosition(pos) {
this.geocoder.geocode({
latLng: pos
}, responses => {
if (responses && responses.length > 0) {
this.marker.formatted_address = responses[0].formatted_address
} else {
this.marker.formatted_address = 'Cannot determine address at this location.'
}
this.infowindow.setContent(this.marker.formatted_address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6))
this.infowindow.open(this.map, this.marker)
});
},
codeAddress() {
let address = document.getElementById('address').value;
this.geocoder.geocode({
'address': address
}, (results, status) => {
if (status == google.maps.GeocoderStatus.OK) {
this.map.setCenter(results[0].geometry.location);
if (this.marker) {
this.marker.setMap(null);
if (this.infowindow) this.infowindow.close();
}
this.marker = new google.maps.Marker({
map: this.map,
draggable: true,
position: results[0].geometry.location
});
google.maps.event.addListener(this.marker, 'dragend', () => {
this.geocodePosition(this.marker.getPosition());
});
google.maps.event.addListener(this.marker, 'click', () => {
if (this.marker.formatted_address) {
this.infowindow.setContent(this.marker.formatted_address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6));
} else {
this.infowindow.setContent(address + "<br>coordinates: " + this.marker.getPosition().toUrlValue(6));
}
this.infowindow.open(this.map, this.marker);
});
google.maps.event.trigger(this.marker, 'click');
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
})
Remember to store the global value in the Vue component's data property and access it using this.propertyName in your methods.