<template>
  <div class="q-pa-sm">
    <div class="q-gutter-sm">
      <div class="row q-col-gutter-sm q-mb-sm items-center no-wrap">
        <div class="col-grow">
          <q-select
            v-model="address"
            label="Indirizzo"
            use-input
            input-class="col-auto"
            input-debounce="300"
            :options="suggestions"
            @filter="getAddressSuggestions"
            filled  
            dense
            hide-dropdown-icon
            clearable
          />
        </div>        
        <div class="col-3">
          <q-btn @click="searchAddress" label="Cerca" color="primary" />
        </div>
      </div>
      <div class="row q-col-gutter-sm">
        <q-col cols="6">
          <q-input 
          v-model="coordinates.lat" label="Latitudine:" 
          filled dense />
        </q-col>
        <q-col cols="6">
          <q-input
            v-model="coordinates.lng"
            label="Longitudine:"
            filled
            dense
          />
        </q-col>
      </div>
    </div>

    <div
      id="map"
      :style="`height:${myheight}px; width:99%`"
    >
      <p v-if="coordinates && coordinates.lat">
        Coordinate: {{ coordinates.lat.toFixed(6) }},
        {{ coordinates.lng.toFixed(6) }}
      </p>
    </div>
  </div>
</template>
<script lang="ts" src="./CMapGetCoordinates.ts">
</script>

<style lang="scss" scoped>
@import './CMapGetCoordinates.scss';
</style>
