0

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>
3
  • Eu implementei o google mapas com esse npm, foi esse npm que você utilizou?
    – Marconi
    Commented 31/07/2018 às 18:42
  • @Marconi não estou tentando implementar na mão mesmo.
    – William
    Commented 31/07/2018 às 18:48
  • 2
    Vai com esse npm, fica bom demais utilizar o maps com ele!
    – Marconi
    Commented 31/07/2018 às 18:49

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .