Mapa s POI ve verejne casti

src/components/map/MapWrapper.vue

@@ -231,6 +231,8 @@ const handlePoiClick = (poi) => {
 }
 
 const isDetailInTrack = computed(() => {
+  if (!props.track) return false;
+
   return !!props.track.path.find(i => i.lat === infoWindow.value.position.lat && i.lng === infoWindow.value.position.lng);
 });
 
@@ -245,7 +247,7 @@ const isControlsOpened = ref(false);
     @click="handleMapClick"
     map-type-id="roadmap"
     gesture-handling="greedy"
-    :max-zoom="11"
+    :max-zoom="13"
     ref="mapRef"
   >
     <AirspaceInfoWindow
@@ -297,8 +299,16 @@ const isControlsOpened = ref(false);
         :options="{position: {lat: poi.gpsLatitude, lng: poi.gpsLongitude}, anchorPoint: 'BOTTOM_CENTER'}"
         @click.stop="handlePoiClick(poi)"
       >
-        <div style="padding: 5px; border-radius: 15px; background: #8bdfff">
-          <img style="width: 20px" src="/mapIcons/photo-32x32.png" alt="">
+        <div class="poi-avatar" :title="poi.name" v-if="!poi.titlePhoto">
+          <img src="/mapIcons/photo-32x32.png" alt="">
+        </div>
+
+        <div
+          :title="poi.name"
+          v-else
+          class="poi-img"
+          :style="`background-image: url(${poi.titlePhoto.thumbnailUrl})`"
+        >
         </div>
       </CustomMarker>
     </template>
@@ -345,3 +355,25 @@ const isControlsOpened = ref(false);
     </CustomControl>
   </GoogleMap>
 </template>
+
+
+<style lang="scss">
+.poi-img {
+  border: solid 3px #8bdfff;
+  outline: solid 1px black;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-size: cover;
+}
+
+.poi-avatar {
+  padding: 5px;
+  border-radius: 15px;
+  background: #8bdfff;
+
+  img {
+    width: 20px;
+  }
+}
+</style>

src/components/poi/POIList.vue

@@ -38,7 +38,7 @@ const getRoute = (item) => {
   <LoadMoreList :total-items-count="totalItemsCount" :items-length="items.length">
     <template #items>
       <q-list bordered separator>
-        <q-item clickable v-ripple v-for="poi of items" :key="poi" :to="getRoute(poi)">
+        <q-item clickable v-for="poi of items" :key="poi" :to="getRoute(poi)">
           <q-item-section avatar>
             <q-avatar v-if="poi.titlePhoto">
               <img :src="poi.titlePhoto.thumbnailUrl" alt=""/>