map-search.vue

map-search.vue

<template>
  <l-map
    ref="map"
    :zoom="16"
    :center="userCoordinates"
    class="map-wrap"
    @update:bounds="boundsChange"
  >
    <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
    <l-marker
      :lat-lng="userCoordinates"
    >
      <l-icon
        :icon-size="[36, 42]"
        :icon-url="require('~/assets/images/map/pin.svg')"
      />
    </l-marker>
    <template
      v-for="pg of searchResults"
    >
      <l-marker
        v-if="pg.show"
        :key="pg.name"
        :lat-lng="[pg.place.latitude, pg.place.longitude]"
        @click="panToPg(pg)"
      >
        <l-icon
          :icon-size="[36, 42]"
          :icon-url="require('~/assets/images/map/marker.svg')"
        />
      </l-marker>
    </template>
    <l-control position="topleft">
      <v-toolbar class="search-toolbar mr-3">
        <v-app-bar-nav-icon @click="toggleResultsPanel" />
        <form @submit.prevent="search">
          <v-text-field
            v-model="searchTerm"
            solo
            flat
            label="Buscar"
            append-icon="mdi-magnify"
            hide-details="auto"
            @click:append="search"
          />
        </form>
        <v-btn icon @click="panToUserLocation">
          <v-icon>mdi-crosshairs-gps</v-icon>
        </v-btn>
      </v-toolbar>
    </l-control>
  </l-map>
</template>