show map and how to arrive in place page

components/EventMapDialog.vue

@@ -2,64 +2,34 @@
 v-card
   v-container
     div(:style="{'height': mapHeight}")
-      Map.mt-4(:place='event.place' :height='mapHeight' )
+      Map(:place='place' :height='mapHeight' )
     
     v-row.my-4.d-flex.flex-column.align-center.text-center
       .text-h6
         v-icon(v-text='mdiMapMarker' )
-        nuxt-link.ml-2.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`')
+        nuxt-link.ml-2.text-decoration-none(v-text="place.name" :to='`/place/${place.name}`')
-        .mx-2(v-text="`${event.place.address}`")
+        .mx-2(v-text="`${place.address}`")
-  v-card-actions
+  v-card-actions.py-4
-    v-row(color='primary')
+    HowToArriveNav
-      //- p.my-4(v-text="$t('common.getting_there')")
-      v-btn.ml-2(icon large :href="routeBy('foot')")
-        v-icon(v-text='mdiWalk')
-      v-btn.ml-2(icon large :href="routeBy('bike')")
-        v-icon(v-text='mdiBike')
-      v-btn.ml-2(icon large :href="routeBy('car')")
-        v-icon(v-text='mdiCar')
     v-spacer
     v-btn(@click='$emit("close")' outlined) Close
 </template>
 <script>
 
-import { mapActions } from 'vuex'
+import { mdiMapMarker } from '@mdi/js'
-import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
+import HowToArriveNav from '@/components/HowToArriveNav.vue'
 
 export default {
   components: {
+    HowToArriveNav,
     [process.client && 'Map']: () => import('@/components/Map.vue')
   },
   data () {
-    return {
+    return { mdiMapMarker }
-      mdiWalk, mdiBike, mdiCar, mdiMapMarker,
-      mapHeight: "55vh"
-    }
   },
   props: {
-    event: { type: Object, default: () => ({}) }
+    place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) },
-  },
+    mapHeight: { type: String, default: '55vh' },
-  methods: {
-    ...mapActions(['setSetting']),
-    // mountLocateControl() {
-    //   this.$refs.map.mapObject.locate({
-    //     locateOptions: {
-    //       maxZoom: 10
-    //     }
-    //   });
-    //   this.$refs.map.mapObject.MyLocate();
-    // },
-    routeBy (type) {
-      const lat = this.event.place.latitude
-      const lon = this.event.place.longitude
-      const routingType = {
-        foot: "engine=fossgis_osrm_foot",
-        bike: "engine=fossgis_osrm_bike",
-        transit: null,
-        car: "engine=fossgis_osrm_car"
-      }
-      return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingType[type]}#map=14/${lat}/${lon}`
-     },
   }
 }
 </script>

components/HowToArriveNav.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+v-row(color='primary')
+  //- p.my-4(v-text="$t('common.getting_there')")
+  v-btn.mx-2(icon large :href="routeBy('foot')")
+    v-icon(v-text='mdiWalk')
+  v-btn.mx-2(icon large :href="routeBy('bike')")
+    v-icon(v-text='mdiBike')
+  v-btn.mx-2(icon large :href="routeBy('car')")
+    v-icon(v-text='mdiCar')
+</template>
+<script>
+
+import { mapActions } from 'vuex'
+import { mdiWalk, mdiBike, mdiCar } from '@mdi/js'
+
+export default {
+  data () {
+    return { mdiWalk, mdiBike, mdiCar }
+  },
+  props: {
+    place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) }
+  },
+  methods: {
+    ...mapActions(['setSetting']),
+    // mountLocateControl() {
+    //   this.$refs.map.mapObject.locate({
+    //     locateOptions: {
+    //       maxZoom: 10
+    //     }
+    //   });
+    //   this.$refs.map.mapObject.MyLocate();
+    // },
+    routeBy (type) {
+      const lat = this.place.latitude
+      const lon = this.place.longitude
+      const routingType = {
+        foot: "engine=fossgis_osrm_foot",
+        bike: "engine=fossgis_osrm_bike",
+        transit: null,
+        car: "engine=fossgis_osrm_car"
+      }
+      return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingType[type]}#map=14/${lat}/${lon}`
+     },
+  }
+}
+</script>

pages/event/_slug.vue

@@ -177,7 +177,7 @@ v-container#event.h-event.pa-2.pa-sm-2(itemscope itemtype="https://schema.org/Ev
       EmbedEvent(:event='event' @close='showEmbed=false')
     
     v-dialog(v-show='settings.allow_geolocation && event.place.latitude && event.place.longitude' v-model='mapModal' :fullscreen='$vuetify.breakpoint.xsOnly' destroy-on-close)
-      EventMapDialog(:event='event' @close='mapModal=false')        
+      EventMapDialog(:place='event.place' @close='mapModal=false')        
 
 </template>
 <script>

pages/place/_place.vue

@@ -5,6 +5,14 @@
     </h1>
     <span v-if='place.name!=="online"' class="d-block text-subtitle text-center w-100">{{ place.address }}</span>
 
+    <!-- Map -->
+    <div v-if='settings.allow_geolocation && place.latitude && place.longitude' class='my-4'>
+      <Map :place='place' height="35vh" />
+      <div class='my-4'>
+        <HowToArriveNav :place='place' class="justify-center" />
+      </div>
+    </div>
+
     <!-- Events -->
     <div id="events" class='mt-14'>
       <v-lazy class='event v-card' :value='idx<9' v-for='(event, idx) in events' :key='event.id' :min-height='hide_thumbs ? 105 : undefined' :options="{ threshold: .5, rootMargin: '500px' }" :class="{ 'theme--dark': is_dark }">
@@ -17,10 +25,15 @@
 
 import { mapState, mapGetters } from 'vuex'
 import Event from '@/components/Event'
+import HowToArriveNav from '@/components/HowToArriveNav.vue'
 
 export default {
   name: 'Place',
-  components: { Event },
+  components: { 
+    Event, 
+    HowToArriveNav,
+    [process.client && 'Map']: () => import('@/components/Map.vue')
+   },
   head() {
     const title = `${this.settings.title} - ${this.place.name}`
     return {