diff --git a/components/EventMapDialog.vue b/components/EventMapDialog.vue
new file mode 100644
index 00000000..378f2719
--- /dev/null
+++ b/components/EventMapDialog.vue
@@ -0,0 +1,65 @@
+<template lang="pug">
+v-card
+  v-container
+    div(:style="{'height': mapHeight}")
+      Map.mt-4(:place='event.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}`')
+        .mx-2(v-text="`${event.place.address}`")
+  v-card-actions
+    v-row(color='primary')
+      //- 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 { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
+
+export default {
+  components: {
+    [process.client && 'Map']: () => import('@/components/Map.vue')
+  },
+  data () {
+    return {
+      mdiWalk, mdiBike, mdiCar, mdiMapMarker,
+      mapHeight: "55vh"
+    }
+  },
+  props: {
+    event: { type: Object, default: () => ({}) }
+  },
+  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>
diff --git a/components/Map.vue b/components/Map.vue
index a62b2beb..be67663a 100644
--- a/components/Map.vue
+++ b/components/Map.vue
@@ -1,43 +1,26 @@
 <template lang="pug">
 client-only(placeholder='Loading...' )
-  v-card
-    v-container
-      LMap(ref="map"
-          id="leaflet-map-dialog"
-          :zoom="zoom"
-          :options="{attributionControl: false}"
-          :center="center")
-        LControlAttribution(position='bottomright' prefix="")
-        LTileLayer(
-            :url="url"
-            :attribution="attribution")
-        LMarker(
-          :lat-lng="marker.coordinates")
+  LMap(ref="leafletMap"
+      id="leaflet-map"
+      :style="{ 'height': height }"
+      :zoom="zoom"
+      :options="{attributionControl: false}"
+      :center="center")
+    LControlAttribution(position='bottomright' prefix="")
+    LTileLayer(
+        @tileload="$emit('tileload')"
+        @tileerror="$emit('tileerror')"
+        :url="url"
+        :attribution="attribution")
+    LMarker(v-if="showMarker"
+      :lat-lng="marker.coordinates")
 
-      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}`')
-          .mx-2(v-text="`${event.place.address}`")
-    v-card-actions
-      v-row
-        //- 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 "leaflet/dist/leaflet.css"
 import { LMap, LTileLayer, LMarker, LPopup, LControlAttribution } from 'vue2-leaflet'
-import { mapActions, mapState } from 'vuex'
 import { Icon } from 'leaflet'
-import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
 
 export default {
   components: {
@@ -49,20 +32,31 @@ export default {
   },
   data ({ $store }) {
     return {
-      mdiWalk, mdiBike, mdiCar, mdiMapMarker,
       url: $store.state.settings.tilelayer_provider || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       attribution: $store.state.settings.tilelayer_provider_attribution || "<a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
-      zoom: 14,
-      center: [this.event.place.latitude, this.event.place.longitude],
-      marker: {
-        address: this.event.place.address,
-        coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
-      },
-      routingProvider: 'openstreetmap',
+    }
+  },
+  computed: {
+    center () {
+      if (this.mapCenter.length)
+        return this.mapCenter
+      else {
+        return [this.place.latitude, this.place.longitude]
+      }
+    },
+    marker () {
+      return {
+        address: this.place.address,
+        coordinates: {lat: this.place.latitude, lon: this.place.longitude }
+      }      
     }
   },
   props: {
-    event: { type: Object, default: () => ({}) }
+    place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) },
+    height: { type: String, default: '' },
+    showMarker: { type: Boolean, default: true },
+    mapCenter: { type: Array, default: () => ([]) },
+    zoom: { type: Number, default: () => (16) },
   },
   mounted() {
     delete Icon.Default.prototype._getIconUrl;
@@ -73,41 +67,17 @@ export default {
     });
 
     setTimeout(() => {
-      this.$refs.map.mapObject.invalidateSize();
-    }, 200);
-  },
-  computed: {
-    ...mapState(['settings']),
-  },
-  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"
+      if (this.$refs.leafletMap && this.$refs.leafletMap.mapObject ) {
+        this.$refs.leafletMap.mapObject.invalidateSize();
       }
-      return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingType[type]}#map=14/${lat}/${lon}`
-     },
+    }, 200);
   }
 }
 </script>
 
 <style>
-  #leaflet-map-dialog {
-    height: 55vh;
-    width: 100%;
+  #leaflet-map {
+    height: 10rem;
     border-radius: .3rem;
     border: 1px solid #fff;
     z-index: 1;
diff --git a/components/MapEdit.vue b/components/MapEdit.vue
deleted file mode 100644
index dff72e4f..00000000
--- a/components/MapEdit.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template lang="pug">
-client-only(placeholder='Loading...' )
-  LMap(ref="mapEdit"
-      id="leaflet-map"
-      :zoom="zoom"
-      :options="{attributionControl: false}"
-      :center="center")
-    LControlAttribution(position='bottomright' prefix="")
-    LTileLayer(
-        :url="url"
-        :attribution="attribution")
-    LMarker(
-      :lat-lng="marker.coordinates")
-
-</template>
-<script>
-
-import "leaflet/dist/leaflet.css"
-import { LMap, LTileLayer, LMarker, LPopup, LControlAttribution } from 'vue2-leaflet'
-import { Icon } from 'leaflet'
-import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
-
-export default {
-  components: {
-    LMap,
-    LTileLayer,
-    LMarker,
-    LPopup,
-    LControlAttribution
-  },
-  data ({ $store }) {
-    return {
-      mdiWalk, mdiBike, mdiCar, mdiMapMarker,
-      url: $store.state.settings.tilelayer_provider || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-      attribution: $store.state.settings.tilelayer_provider_attribution || "<a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
-      zoom: 16,
-    }
-  },
-  computed: {
-    center () {
-      return [this.place.latitude, this.place.longitude]
-    },
-    marker () {
-      return {
-        address: this.place.address,
-        coordinates: {lat: this.place.latitude, lon: this.place.longitude }
-      }      
-    }
-  },
-  props: {
-    place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) }
-  },
-  mounted() {
-    delete Icon.Default.prototype._getIconUrl;
-    Icon.Default.mergeOptions({
-      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-      iconUrl: require('leaflet/dist/images/marker-icon.png'),
-      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-    });
-
-    setTimeout(() => {
-      if (this.$refs.mapEdit && this.$refs.mapEdit.mapObject ) {
-        this.$refs.mapEdit.mapObject.invalidateSize();
-      }
-    }, 200);
-  }
-}
-</script>
-
-<style>
-  #leaflet-map {
-    height: 10rem;
-    border-radius: .3rem;
-    border: 1px solid #fff;
-    z-index: 1;
-  }
-</style>
diff --git a/components/WhereInputAdvanced.vue b/components/WhereInputAdvanced.vue
index bcaf5bdd..d81faa11 100644
--- a/components/WhereInputAdvanced.vue
+++ b/components/WhereInputAdvanced.vue
@@ -38,7 +38,7 @@ v-card
           :rules="$validators.longitude")
     p.mt-4(v-if='place.isNew' v-html="$t('event.address_geocoded_disclaimer')")
 
-    MapEdit.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
+    Map.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
 
   v-divider(v-if='settings.allow_online_event && showGeocoded')
 
@@ -76,7 +76,7 @@ export default {
     onlineLocations: { type: Array, default: [] }
   },
   components: {
-    [process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
+    [process.client && 'Map']: () => import('@/components/Map.vue')
   },
   data ({$store}) {
     return {
diff --git a/components/admin/Geolocation.vue b/components/admin/Geolocation.vue
index f1b23061..0c64a559 100644
--- a/components/admin/Geolocation.vue
+++ b/components/admin/Geolocation.vue
@@ -49,8 +49,13 @@ v-card
             :label="$t('admin.tilelayer_provider_attribution')"
             :placeholder="tilelayer_provider_attribution_default")
 
-      div(id="leaflet-map-preview" max-height='10px')
-      //- Map
+      Map(:key='mapKey' v-if='mapPreview'
+        @tileerror='tilelayerTestError'
+        @tileload='tilelayerTestSuccess'
+        height="20rem" 
+        showMarker=false 
+        :mapCenter='mapCenter' 
+        :zoom='12')
 
   v-card-actions
     v-spacer
@@ -61,19 +66,19 @@ v-card
 <script>
 import { mapActions, mapState } from 'vuex'
 import { isoCountries } from '../../server/helpers/geolocation/isoCountries'
+import geolocation from '../../server/helpers/geolocation/index'
 import { mdiChevronDown } from '@mdi/js'
-// import Map from '~/components/Map'
-import "leaflet/dist/leaflet.css"
 
 export default {
-  props: {
-    setup: { type: Boolean, default: false }
+  components: { 
+    [process.client && 'Map']: () => import('@/components/Map.vue')
   },
-  // components: { Map },
   data ({ $store }) {
     return {
       mdiChevronDown,
-      loading: false,
+      mapKey: 0,
+      mapPreview: false,
+      mapCenter: [42, 42],
       testGeocodingLoading: false,
       testTileLayerLoading: false,
       geocoding_provider_type_items: ['Nominatim', 'Photon'],
@@ -87,57 +92,38 @@ export default {
       tilelayer_provider_attribution: $store.state.settings.tilelayer_provider_attribution || '',
       tilelayer_provider_attribution_default: '<a target=\'_blank\' href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors',
       countries: isoCountries,
-      mapPreviewTest: null,
     }
   },
-  created() {
-    if (process.client) {
-      const L = require('leaflet')
+  computed: {
+    ...mapState(['settings', 'events']),
+    tilelayerTest() {
+      const v = this.tilelayer_provider !== '' ? this.tilelayer_provider : this.tilelayer_provider_default
+      return v
+    },
+    geocodingTest() {
+      const v = this.geocoding_provider !== '' ? this.geocoding_provider : this.geocoding_provider_default
+      return v
     }
   },
-  computed: mapState(['settings', 'events']),
   methods: {
     ...mapActions(['setSetting']),
     async testGeocodingProvider () {
       this.testGeocodingLoading = true
-      const geocodingProviderTest = this.geocoding_provider || this.geocoding_provider_default
-      const geocodingSoftwareTest = this.geocoding_provider_type || this.geocoding_provider_type_default
+      const currentGeocodingProvider = geolocation.getGeocodingProvider(this.settings.geocoding_provider_type)
       const geocodingQuery = 'building'
-
       try {
-        if (geocodingSoftwareTest === 'Nominatim') {
-          const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, format: 'json', limit: 1 }} )
-        } else if (geocodingSoftwareTest === 'Photon') {
-          const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, limit: 1}} )
-        }
-
-        this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: geocodingProviderTest }), { color: 'success' })
+        const ret = await this.$axios.$get(`placeOSM/${currentGeocodingProvider.commonName}/${geocodingQuery}`, { timeout: 3000 })
+        const res = currentGeocodingProvider.mapQueryResults(ret)
+        this.geocodingTestSuccess()
       } catch (e) {
-        this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: geocodingProviderTest }), { color: 'error' })
+        this.geocodingTestError()
       }
       this.testGeocodingLoading = false
     },
     async testTileLayerProvider () {
       this.testTileLayerLoading = true
-      const tileThis = this
-      const tileLayerTest = this.tilelayer_provider || this.tilelayer_provider_default
-      const tileLayerAttributionTest = this.tilelayer_provider_attribution || this.tilelayer_provider_attribution_default
-
-      // init tilelayer
-      if (this.mapPreviewTest == null) {
-        this.mapPreviewTest = L.map("leaflet-map-preview").setView([40,40],10);
-      }
-      this.tileLayer = L.tileLayer(`${tileLayerTest}`, {attribution: `${tileLayerAttributionTest}`})
-      this.tileLayer.addTo(this.mapPreviewTest)
-
-      // tilelayer events inherited from gridlayer https://leafletjs.com/reference.html#gridlayer
-      this.tileLayer.on('tileload', function (event) {
-          tileThis.tileLayerTestSucess(event, tileLayerTest)
-      });
-      this.tileLayer.on('tileerror', function(error, tile) {
-          tileThis.tileLayerTestError(event, tileLayerTest)
-          tileThis.tileLayer = null
-      });
+      this.mapPreview = true
+      this.mapKey++
       this.testTileLayerLoading = false
     },
     save (key, value) {
@@ -148,22 +134,20 @@ export default {
     done () {
       this.$emit('close')
     },
-    geocodingTestError(event, tileLayerTest) {
-      this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: geocodingTest }), { color: 'error' })
+    geocodingTestError() {
+      this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: this.geocodingTest }), { color: 'error' })
     },
-    tileLayerTestSucess(event, tileLayerTest) {
-      this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: tileLayerTest }), { color: 'success' })
+    geocodingTestSuccess() {
+      this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: this.geocodingTest }), { color: 'success' })
     },
-    tileLayerTestError(event, tileLayerTest) {
-      this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: tileLayerTest }), { color: 'error' })
+    tilelayerTestError() {
+      this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: this.tilelayerTest }), { color: 'error' })
+    },
+    tilelayerTestSuccess() {
+      this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: this.tilelayerTest }), { color: 'success' })
     }
 
   }
 }
 </script>
 
-<style>
-#leaflet-map-preview {
-  height: 20rem;
-}
-</style>
diff --git a/components/admin/Places.vue b/components/admin/Places.vue
index e1d7c11c..ee80662f 100644
--- a/components/admin/Places.vue
+++ b/components/admin/Places.vue
@@ -62,7 +62,7 @@ v-container
                 :label="$t('common.longitude')"
                 :rules="$validators.longitude")
           
-          MapEdit.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")     
+          Map.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")     
 
       v-card-actions
         v-spacer
@@ -96,7 +96,7 @@ import geolocation from '../../server/helpers/geolocation/index'
 
 export default {
   components: {
-    [process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
+    [process.client && 'Map']: () => import('@/components/Map.vue')
   },
   data( {$store} ) {
     return {
diff --git a/pages/event/_slug.vue b/pages/event/_slug.vue
index b719419b..3991c8ec 100644
--- a/pages/event/_slug.vue
+++ b/pages/event/_slug.vue
@@ -177,7 +177,7 @@ v-container#event.pa-2.pa-sm-2(itemscope itemtype="https://schema.org/Event" v-t
       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)
-      Map(:event='event' @close='mapModal=false')        
+      EventMapDialog(:event='event' @close='mapModal=false')        
 
 </template>
 <script>
@@ -188,6 +188,7 @@ import clipboard from '../../assets/clipboard'
 import MyPicture from '~/components/MyPicture'
 import EventAdmin from '@/components/eventAdmin'
 import EmbedEvent from '@/components/embedEvent'
+import EventMapDialog from '@/components/EventMapDialog'
 
 const { htmlToText } = require('html-to-text')
 
@@ -202,7 +203,7 @@ export default {
     EventAdmin,
     EmbedEvent,
     MyPicture,
-    [process.client && 'Map']: () => import('@/components/Map.vue')
+    EventMapDialog
   },
   async asyncData ({ $axios, params, error }) {
     try {