Add map page title, even in head

webapp/locales/de.json

@@ -523,6 +523,7 @@
     "title": "{APPLICATION_NAME} befindet sich in der Wartung"
   },
   "map": {
+    "pageTitle": "Karte",
     "styles": {
       "dark": "Dunkel",
       "outdoors": "Landschaft",

webapp/locales/en.json

@@ -523,6 +523,7 @@
     "title": "{APPLICATION_NAME} is under maintenance"
   },
   "map": {
+    "pageTitle": "Map",
     "styles": {
       "dark": "Dark",
       "outdoors": "Outdoors",

webapp/pages/map.vue

@@ -1,5 +1,10 @@
 <!-- Example Reference: https://codesandbox.io/s/v-mapbox-with-nuxt-lbrt6?file=/pages/index.vue -->
 <template>
+  <div>
+    <ds-space margin="small">
+      <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
+    </ds-space>
+    <ds-space margin="large" />
     <client-only>
       <mgl-map
         :mapbox-gl="mapboxgl"
@@ -31,6 +36,7 @@
         <MglMarker :coordinates="[10.452764, 51.165707]" color="blue" />
       </mgl-map>
     </client-only>
+  </div>
 </template>
 
 <script>
@@ -39,6 +45,11 @@ import { objectValuesToArray } from '../utils/utils'
 
 export default {
   name: 'Map',
+  head() {
+    return {
+      title: this.$t('map.pageTitle'),
+    }
+  },
   data() {
     return {
       mapboxgl,
@@ -97,8 +108,8 @@ export default {
 <style lang="scss">
 // description: https: //github.com/geospoc/v-mapbox/tree/v1.11.2/docs
 //   code example: https: //codesandbox.io/embed/v-mapbox-map-demo-k1l1n?autoresize=1&fontsize=14&hidenavigation=1&theme=dark
-@import "mapbox-gl/dist/mapbox-gl.css";
-@import "v-mapbox/dist/v-mapbox.css";
+@import 'mapbox-gl/dist/mapbox-gl.css';
+@import 'v-mapbox/dist/v-mapbox.css';
 
 .mgl-map-wrapper {
   height: 70vh;