Estou com um problema para setar o pontos (makers) do google maps da api javascript. Na hora que pego as coordenadas da variavel, e seto no meu mapa ele reinicia o componente e apaga o valor da variável. como fazer para que ele não reinicie o componente.
Esse é o meu código 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>
npm
que você utilizou?npm
, fica bom demais utilizar o maps com ele!