Get positions from db and set to map

[caiooaugusto]

I'm trying to get the instanced <gmap-map in this code and display positions fetched from webservice but i think its reference is not right. Some one know how could i do that?

<template>
    <div class='google-maps-container'>
        <geolocation
            :position='position'
            @geolocationWasGot='position = $event'
        ></geolocation>
        <gmap-map
            class='google-maps'
            :center="center"
            :zoom="3"
            map-type-id='terrain'
            :options="{
                disableDefaultUI: true
            }"
        >
            <gmap-marker
                :key="index"

                v-for="(m, index) in markers"
                :position="m.position"
                :clickable="true"
                :draggable="true"
                @click="center=m.position"
            ></gmap-marker>
        </gmap-map>
        <v-btn
            v-tooltip:left="{ html: 'Atualizar dados' }" secondary floating class="floating-action-button"
            @click.native='refresh'
        >
            <v-icon>my_location</v-icon>
        </v-btn>
    </div>
</template>

<script>
    import * as VueGoogleMaps from 'vue2-google-maps';
    import Vue from 'vue';

    import Toolbar from '../home/Toolbar.vue'
    import HomeFooter from '../home/Footer.vue'
    import Sidebar from '../home/Sidebar.vue'
    import Geolocation from '../device/Geolocation.vue'

    Vue.use(VueGoogleMaps, {
        load: {
            key: 'AIzaSyBf-mbnDKGcPxTDvVWAYittSu-gQGQ5pCc',
            //v: 'OPTIONAL VERSION NUMBER',
            // libraries: 'places', //// If you need to use place input
        }
    });

    export default { 
        components: {
            Toolbar,
            HomeFooter,
            Sidebar,
            Geolocation
        },
        props: ['position'],
        data () {
            return {
                position: null,
                sidebar: false,
                center: {lat: 0, lng: 0},
                markers: [],
                e: 2
            }
        },
        mounted () {
            this.$emit('switchFooter', this.e)
            //this.getLocationsNearToUser()
        },
        watch: {
            '$route'(to, from) {
                // Call resizePreserveCenter() on all maps 
                Vue.$gmapDefaultResizeBus.$emit('resize')
            },
            position(position){
                this.center.lat = position[1].subtitle
                this.center.lng = position[3].subtitle
                this.$emit('setMapCenter', this.center)

                this.getLocationsNearToUser()
            },
            center(center){
                console.log('center changed')
                console.log(center)
            }
        },
        methods:{
            setMapMarkers(){
                var infoWindow = new google.maps.InfoWindow
                for(var index = 0; index < this.markers.length; index++) {
                    // get all attributes to show
                    //var id = markerElem.getAttribute('id');
                    //var name = markerElem.getAttribute('name');
                    //var address = markerElem.getAttribute('address');
                    //var type = markerElem.getAttribute('type');
                    var point = new google.maps.LatLng(
                        parseFloat(this.markers[index].latitude),
                        parseFloat(this.markers[index].longitude)
                    )

                    var infowincontent = document.createElement('div')
                    var strong = document.createElement('strong')
                    strong.textContent = "DESCRIÇÃO DA PESCA"
                    infowincontent.appendChild(strong)
                    infowincontent.appendChild(document.createElement('br'))

                    var text = document.createElement('text')
                    text.textContent = "PEIXE E EQUIPAMENTOS"
                    infowincontent.appendChild(text)
                    var customLabel = {
                        restaurant: {
                            label: 'R'
                        },
                        bar: {
                            label: 'B'
                        }
                    }

                    var icon = customLabel['restaurant'] || {}
                    var marker = new google.maps.Marker({
                        map: this.$refs['vue-map'],
                        position: point,
                        label: icon.label
                    })
                    marker.addListener('click', function() {
                        infoWindow.setContent(infowincontent);
                        infoWindow.open(this.$refs['vue-map'], marker);
                    })
                }
            },
            getLocationsNearToUser () {
                this.$http.get('location/locationsNearToUser', {params: {latitude: this.center.lat, longitude: this.center.lng, radius: 1000 }})
                    .then(response => {
                        return response.json()
                    }, error => {
                        //implement error
                        console.log('error locations')
                        console.log(error)
                    }).then(data => {
                        /*for(var index = 0; index < data.length; index++) {
                            this.markers.push({
                                lat: data[index].latitude,
                                lng: data[index].longitude,
                                historyId: data[index].history_id
                            })
                        }*/
                        this.markers = data;
                        this.setMapMarkers()
                        console.log(' this.markers locations')
                        console.log( this.markers)
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    .google-maps-container
        position fixed    
        top 0px
        bottom 0px
        right 0px
        left 0px
        height 100vh
        width 100vw

    .google-maps
        position absolute
        top 0px
        bottom 0px
        right 0px
        left 0px        
</style>

[caiooaugusto]

center map is not working too

<gmap-map
            class='google-maps'
            :center="center"

watch: { '$route'(to, from) { // Call resizePreserveCenter() on all maps Vue.$gmapDefaultResizeBus.$emit('resize') }, position(position){ this.center.lat = position[1].subtitle this.center.lng = position[3].subtitle

[caiooaugusto]

sorry, i solved it, i just forgot change correct data assigment

but i cant center the map, and cant set markest content info window :(

for(var index = 0; index < data.length; index++) {
                            this.markers.push({
                                lat: data[index].latitude,
                                lng: data[index].longitude,
                                historyId: data[index].history_id
                            })
                        }

<gmap-marker
                :key="index"
                v-for="(m, index) in markers"
                :position="m"
                :clickable="true"
                :draggable="true"
                @click="center=m"
            ></gmap-marker>

[xkjyeah]

To center... is subtitle a string or an int? do you get error messages in your console?

[xkjyeah]

You need to use a GmapInfoWindow to set infowindow contents.

[martijnhiemstra]

    this.markers.push({
        lat: data[index].latitude,
        lng: data[index].longitude,
        historyId: data[index].history_id
    })

That won't work because lat and lng need to be a position so it should be:

    this.markers.push({
        position: {
          lat: data[index].latitude,
          lng: data[index].longitude
        },
        historyId: data[index].history_id
    })