maps.js

eslint-disable
<template>
  <q-layout>
    <q-search icon="search" id="busca"></q-search>
  </q-layout>
</template>

<script>
import db from './firebaseConfig'
let coordsList = db.ref('tecnico')

export default {
  data () {
    return {
      ivanirLat: '',
      ivanirLong: ''
    }
  },
  computed: {

  },
  methods: {
    initMap: function () {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -9.7655739, lng: -36.651808},
        zoom: 8,
        mapTypeId: 'terrain'
      })

      coordsList.child('ivanir/17-5-2017').limitToLast(1).on('child_added', data => {
        this.ivanirLat = data.val().lat
        this.ivanirLong = data.val().long
        var ivanir = new google.maps.Marker({
          position: new google.maps.LatLng(scope.ivanirLat, scope.ivanirLong),
          map: map,
          draggable: true,
          title: 'Ivanir',
        })
        ivanir.setMap(map)
      })

      /* var moises = new google.maps.Marker({
        position: new google.maps.LatLng(scope.moises[0].lat, scope.moises[0].long),
        map: map,
        draggable: true,
        title: 'Moises',
        icon: 'https://placeimg.com/32/32/people/2'
      })

      moises.setMap(map)

      var regis = new google.maps.Marker({
        position: new google.maps.LatLng(scope.regis[0].lat, scope.regis[0].long),
        map: map,
        draggable: true,
        title: 'Regis',
        icon: 'https://placeimg.com/32/32/people/3'
      })

      regis.setMap(map)

      var damiao = new google.maps.Marker({
        position: new google.maps.LatLng(scope.damiao[0].lat, scope.damiao[0].long),
        map: map,
        draggable: true,
        title: 'Damião',
        icon: 'https://placeimg.com/32/32/people/4'
      })

      damiao.setMap(map)

      var martone = new google.maps.Marker({
        position: new google.maps.LatLng(scope.martone[0].lat, scope.martone[0].long),
        map: map,
        draggable: true,
        title: 'Martone',
        icon: 'https://placeimg.com/32/32/people/5'
      })

      martone.setMap(map)

      var junior = new google.maps.Marker({
        position: new google.maps.LatLng(scope.junior[0].lat, scope.junior[0].long),
        map: map,
        draggable: true,
        title: 'Junior',
        icon: 'https://placeimg.com/32/32/people/6'
      })

      junior.setMap(map)

      var niron = new google.maps.Marker({
        position: new google.maps.LatLng(scope.niron[0].lat, scope.niron[0].long),
        map: map,
        draggable: true,
        title: 'Niron',
        icon: 'https://placeimg.com/32/32/people/7'
      })

      niron.setMap(map)

      var leonardo = new google.maps.Marker({
        position: new google.maps.LatLng(scope.leonardo[0].lat, scope.leonardo[0].long),
        map: map,
        draggable: true,
        title: 'Leonardo',
        icon: 'https://placeimg.com/32/32/people/8'
      })

      leonardo.setMap(map)

      var niraldo = new google.maps.Marker({
        position: new google.maps.LatLng(scope.niraldo[0].lat, scope.niraldo[0].long),
        map: map,
        draggable: true,
        title: 'Niraldo',
        icon: 'https://placeimg.com/32/32/people/9'
      })

      niraldo.setMap(map)

      var geovane = new google.maps.Marker({
        position: new google.maps.LatLng(scope.geovane[0].lat, scope.geovane[0].long),
        map: map,
        draggable: true,
        title: 'geovane',
        icon: 'https://placeimg.com/32/32/people/10'
      })

      geovane.setMap(map) */
    }
  },
  mounted () {
    console.log(this)
    this.initMap()
  }
}
</script>

<style lang="styl">
  #map {
    height: 100%;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  #busca {
    z-index: 9000;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 400px;
  }
</style>