Exemplo de uso do vue-googlemaps

vue-googlemaps

<template>
  <div id="inicio">
    <!-- LINHA 1 -->
    <b-row>
      <b-col col lg="12" class="demo">
        <googlemaps-map ref="map" class="map" :center.sync="map.center" :zoom.sync="map.zoom">
          <!-- User Position -->
          <googlemaps-user-position @update:position="setUserPosition"/>

          <!-- Estabelecimento Marker -->
          <googlemaps-marker
            :title="map.userPosition.estabelecimento"
            :draggable="false"
            :position="map.userPosition"
          />

          <!-- Motoboys Marker -->
          <googlemaps-marker
            v-for="(marker, mk) of map.markers"
            :key="mk"
            :title="marker.motoboy_name"
            :draggable="false"
            :position="{ lat: marker.lat, lng: marker.lng }"
            :icon="map.motoboyIcon"
          />
        </googlemaps-map>
      </b-col>
      <!-- <b-col col lg="4">
        <b-card title="Bairros e Preços">
          <b-form-group id="select-bairro-group" label="Selecionar Bairro:" label-for="input-3">
            <b-form-select
              id="select-bairro"
              v-model="selected_bairro"
              :options="bairros_to_select"
              required
            ></b-form-select>
            <b-form-group style="margin-top: 10px;">
              <b-button block variant="dark">Solicitar Motoboy</b-button>
            </b-form-group>
          </b-form-group>
        </b-card>
      </b-col>-->
    </b-row>

    <!-- LINHA 2 -->
    <b-row>
      <b-col col lg="12" style="overflow-x:auto;">
        <table class="table">
          <thead>
            <th v-for="(header, h) of entregas_em_andamento_keys" :key="h">{{ header.label }}</th>
          </thead>
          <tbody>
            <tr v-for="(entrega, e) of entregas_em_andamento" :key="e">
              <td>
                <b-img
                  v-bind="imgFieldsProps"
                  :src="entrega.entregador.img"
                  rounded
                  alt="Rounded image"
                ></b-img>
              </td>
              <td>{{ entrega.entregador.nome }}</td>
              <td>{{ entrega.distancia }}</td>
              <td>{{ entrega.destino }}</td>
              <td>R$ {{ entrega.valor }}</td>
              <td>R$ {{ entrega.pagamento }}</td>
              <td>
                <b-badge :variant="statusColor(entrega.status.slug)">{{ entrega.status.text }}</b-badge>
              </td>
            </tr>
          </tbody>
        </table>
      </b-col>
    </b-row>
  </div>
</template>


<script>
import { Map } from "vue-googlemaps";

export default {
  components: {
    Map
  },
  data() {
    return {
      imgFieldsProps: { blank: false, width: 75, height: 60, class: "m1" },
      map: {
        motoboyIcon: {
          url: "https://img.icons8.com/color/48/000000/motorbike-helmet.png"
        },
        zoom: 15,
        userPosition: {
          estabelecimento: "Rei do Caldo",
          lat: -14.87334789,
          lng: -40.84690155
        },
        center: {
          lat: -14.87334789,
          lng: -40.84690155
        },
        markers: [
          {
            motoboy_name: "Gilmar",
            local: "filipinas",
            lat: -14.87309902,
            lng: -40.84721268
          },
          {
            motoboy_name: "Márcio",
            local: "trilha do sul",
            lat: -14.87050666,
            lng: -40.84485234
          },
          {
            motoboy_name: "Nilson",
            local: "movel",
            lat: -14.87114957,
            lng: -40.85167588
          },
          {
            motoboy_name: "Tayrone",
            local: "posto sao jorge",
            lat: -14.86739578,
            lng: -40.85098924
          }
        ]
      },
      selected_bairro: null,
      bairros: [
        {
          nome_bairro: "Bairro Brasil",
          nome_bairro_slug: "bairro_brasil",
          valor: 4.5
        },
        {
          nome_bairro: "Felícia",
          nome_bairro_slug: "felicia",
          valor: 10.4
        },
        {
          nome_bairro: "Vila Serrana",
          nome_bairro_slug: "vila_serrana",
          valor: 7.4
        },
        {
          nome_bairro: "Candeias",
          nome_bairro_slug: "candeias",
          valor: 6.0
        }
      ],
      entregas_em_andamento_keys: [
        {
          key: "entregador.img",
          label: "Entregador"
        },
        {
          key: "entregador.nome",
          label: "Nome"
        },
        {
          key: "distancia",
          label: "Distância"
        },
        {
          key: "destino",
          label: "Destino"
        },
        {
          key: "valor",
          label: "Valor"
        },
        {
          key: "pagamento",
          label: "Pagamento"
        },
        {
          label: "Status"
        }
      ],
      entregas_em_andamento: [
        {
          entregador: {
            img:
              "http://www.motoboyfaccil.com.br/images/banner-carro-e-moto-simulador-de-consorcio.png",
            nome: "Gilmar"
          },
          distancia: 350,
          destino: "vila_serrana",
          valor: 4,
          pagamento: 4 + (350 * 0.2) / 10,
          status: { slug: "em_andamento", text: "Em andamento" }
        }
      ]
    };
  },
  computed: {
    bairros_to_select() {
      const bairros = [];

      bairros.push({
        disabled: true,
        text: "Selecione um Bairro",
        value: null
      });

      this.bairros.forEach(bairro => {
        bairros.push({
          text: `${bairro.nome_bairro} - R$ ${bairro.valor}`,
          value: bairro.valor
        });
      });
      return bairros;
    }
  },
  methods: {
    statusColor(status) {
      let result = null;
      switch (status) {
        case "em_andamento":
          result = "warning";
          break;
        case "cancelado":
          result = "danger";
          break;
        case "concluido":
          result = "success";
          break;
      }
      return result;
    },
    setUserPosition(position) {
      this.userPosition = position;
    }
  }
};
</script>


<style scoped>
.demo {
  height: 100%;
  min-height: 350px;
  display: flex;
  flex-direction: column;
}
.map {
  flex: 100% 1 1;
}
</style>