Error setting coordinates in google maps with Vue js

Asked

Viewed 73 times

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 I’m not trying to implement on hand even.

  • 2

    Go with that npm, it is too good to use maps with it!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.