I have a problem with setting the google maps api javascript points. At the time I get the coordinates of the variable, and hedge on my map it restarts the component and erases the value of the variable. how to do it so that it does not restart the component.
This is my code vue:
<template>
<div>
<label>Seu Endereço: </label><input type="text" id="endereco" />
<input type="button" @click="ConsultarEndereco" value="Enviar" />
<div :id="nome" ref="mapElement" ></div>
</div>
</template>
<script>
export default {
props:['nome'],
data(){
return {
maker: '',
map: '',
element: '',
coords: ''
}
},
mounted() {
this.initMap(null);
},
methods: {
ConsultarEndereco: function(){
const endereco = document.getElementById("endereco").value;
axios.post('http://localhost:8000/endereco/pesquisar', {
headers: { 'Content-type': 'application/json' },
endereco: endereco
}).then(function(reponse){
var coordenadas = reponse.data.results[0].geometry.location;
this.initMap(coordenadas);
}).catch(function(err){
console.log(err);
});
},
initMap: function(coords = null){
this.element = window.document.getElementById(this.nome);
const options = {
zoom: 14,
center: new google.maps.LatLng(-23.5250428,-46.5177318)
}
this.map = new google.maps.Map(this.element, options);
return this.marker = new google.maps.Marker({
position: new google.maps.LatLng(coords.lat,coords.lng),
map: this.map
});
}
}
}
</script>