0
I’m having a problem setting the points (Makers) of the javascript api google maps. When I get the coordinates of the variable, and Seto in my map it restarts the component and erases the value of the variable. how to make it not restart the component.
This is my code:
<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>
I implemented google maps with this npm, that was
npm
that you used?– Marconi
@Marconi I’m not trying to implement on hand even.
– William
Go with that
npm
, it is too good to use maps with it!– Marconi