diff --git a/config/services.yaml b/config/services.yaml
index 0c620dd1..7f359bca 100644
--- a/config/services.yaml
+++ b/config/services.yaml
@@ -159,3 +159,13 @@ services:
 
     # rider assignment interface
     App\Service\RiderAssignmentHandlerInterface: "@App\\Service\\RiderAssignmentHandler\\CMBRiderAssignmentHandler"
+
+    # map manager
+    #App\Service\GISManager\Bing: ~
+    #App\Service\GISManager\OpenStreet: ~
+    App\Service\GISManager\Google: ~
+
+    #App\Service\GISManagerInterface: "@App\\Service\\GISManager\\Bing"
+    #App\Service\GISManagerInterface: "@App\\Service\\GISManager\\OpenStreet"
+    App\Service\GISManagerInterface: "@App\\Service\\GISManager\\Google"
+    
diff --git a/src/Controller/HomeController.php b/src/Controller/HomeController.php
index 6afa57c5..99b4da36 100644
--- a/src/Controller/HomeController.php
+++ b/src/Controller/HomeController.php
@@ -8,6 +8,7 @@ use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Doctrine\ORM\EntityManagerInterface;
 
 use App\Service\RiderTracker;
+use App\Service\GISManagerInterface;
 
 use App\Entity\Rider;
 
@@ -17,9 +18,13 @@ class HomeController extends Controller
     /**
      * @Menu(selected="home")
      */
-    public function index(EntityManagerInterface $em, RiderTracker $rider_tracker)
+    public function index(EntityManagerInterface $em, RiderTracker $rider_tracker,
+                          GISManagerInterface $gis_manager)
     {
-        return $this->render('home.html.twig');
+        // get map
+        $params['map_js_file'] = $gis_manager->getJSInitFile();
+
+        return $this->render('home.html.twig', $params);
     }
 
     public function getRiderLocations(EntityManagerInterface $em, RiderTracker $rider_tracker)
diff --git a/src/Service/GISManager/Bing.php b/src/Service/GISManager/Bing.php
new file mode 100644
index 00000000..7c5f02ce
--- /dev/null
+++ b/src/Service/GISManager/Bing.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Service\GISManager;
+
+use App\Service\GISManagerInterface;
+
+class Bing implements GISManagerInterface
+{
+    const JS_INIT_FILE = 'initBingMap.js';
+
+    public function getJSInitFile()
+    {
+        // return the bing map js file: initBingMap.js
+        return self::JS_INIT_FILE;
+    }
+}
+
diff --git a/src/Service/GISManager/Google.php b/src/Service/GISManager/Google.php
new file mode 100644
index 00000000..5d76b6a5
--- /dev/null
+++ b/src/Service/GISManager/Google.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Service\GISManager;
+
+use App\Service\GISManagerInterface;
+
+class Google implements GISManagerInterface
+{
+    const JS_INIT_FILE = 'initGoogleMap.js';
+ 
+    public function getJSInitFile()
+    {
+        // return the google map js file: initGoogleMap.js
+        return self::JS_INIT_FILE;
+    }
+}
+
diff --git a/src/Service/GISManager/OpenStreet.php b/src/Service/GISManager/OpenStreet.php
new file mode 100644
index 00000000..e5dc7fd4
--- /dev/null
+++ b/src/Service/GISManager/OpenStreet.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Service\GISManager;
+
+use App\Service\GISManagerInterface;
+
+class OpenStreet implements GISManagerInterface
+{
+    const JS_INIT_FILE = 'initOpenStreetMap.js';
+ 
+    public function getJSInitFile()
+    {
+        // return the openstreet map js file: initOpenStreetMap.js
+        return self::JS_INIT_FILE;
+    }
+}
+
diff --git a/src/Service/GISManagerInterface.php b/src/Service/GISManagerInterface.php
new file mode 100644
index 00000000..ceb4710f
--- /dev/null
+++ b/src/Service/GISManagerInterface.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Service;
+
+interface GISManagerInterface
+{
+    // returns the actual JS file
+    public function getJSInitFile();
+}
+
diff --git a/templates/home.html.twig b/templates/home.html.twig
index f02d76c2..18126607 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -31,7 +31,7 @@
                     <div class="m-portlet__body">
                         <div class="form-group m-form__group row">
                             <div class="col-lg-12">
-                                <div id="m_gmap" style="height:600px;"></div>
+                                <div id="dashboard_map" style="height:600px;"></div>
                             </div>
                         </div>
                     </div>
@@ -42,135 +42,18 @@
     </div>
 {% endblock %}
 
-{% block scripts %}
+{% block js_end %}
+{{ include('map/' ~ map_js_file) }}
 <script>
-
-var map;
-var markerLayerGroup;
-var markers;
-
-initMap();
-displayMarkers();
-
+console.log('mogol');
 function initMap() {
-    map = L.map('m_gmap').setView([3.084216, 101.6129996], 15);
+    var default_lat = {% trans %}default_lat{% endtrans %};
+    var default_lng = {% trans %}default_long{% endtrans %};
 
-    // add tile layer
-    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-        maxZoom: 18,
-        id: 'mapbox/streets-v11',
-        accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
-    }).addTo(map);
+    console.log(default_lat);
 
-    // add marker layer group
-    markerLayerGroup = L.layerGroup().addTo(map);
+    var map = mapCreate('dashboard_map', default_lat, default_lng, 'road', 13);
 }
-
-function displayMarkers() {
-    $.ajax({
-        url: '{{ path('rider_locations') }}',
-    }).done(function(response) {
-        // clear all markers
-        markerLayerGroup.clearLayers();
-
-        // get riders and mark
-        var riders = response.riders;
-
-        $.each(riders, function(rider_id, point) {
-            var lat = point[0];
-            var long = point[1];
-
-            // create markers
-            L.marker([lat, long]).addTo(markerLayerGroup);
-        });
-    });
-}
-
-setInterval(displayMarkers, 60 * 1000);
-
 </script>
-
-{#
-<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
-<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
-
-<script>
-// BEGIN google maps stuff
-
-var map;
-var markers = [];
-
-initMap();
-
-function initMap() {
-    map = new google.maps.Map(document.getElementById('m_gmap'),
-    {
-        center: {
-            lat: {% trans %}default_lat{% endtrans %},
-            lng: {% trans %}default_long{% endtrans %},
-        },
-        mapTypeId: 'roadmap',
-        zoom: 13
-    });
-
-    displayMarkers();
-}
-
-function addMarker(rider_id, location) {
-    var marker = new google.maps.Marker({
-        position: location,
-        label: { 
-            text: rider_id,
-            color: 'black',
-            fontWeight: 'bold',
-        },
-        map: map
-    }); 
-    
-    markers.push(marker);
-}
-
-function clearMarkers() {
-    setMapOnAll(null);
-    markers = [];
-}
-
-function setMapOnAll(map) {
-    for (var i = 0; i < markers.length; i++) {
-        markers[i].setMap(map);
-    }
-} 
-
-function displayMarkers() {
-    $.ajax({
-        url: '{{ path('rider_locations') }}',
-    }).done(function(response) {
-        // clear all markers
-        clearMarkers();
-
-        // get riders and mark
-        var riders = response.riders;
-
-        $.each(riders, function(rider_id, point) {
-            var lat = point[0];
-            var long = point[1];
-
-            var location = {
-                lat: lat,
-                lng: long
-            };
-
-            addMarker(rider_id, location);
-        });
-    });
-}
-
-setInterval(displayMarkers, 60 * 1000);
-
-// END google maps stuff
-</script>
-
-#}
-
 {% endblock %}
+
diff --git a/templates/map/.initGoogleMap.js.swo b/templates/map/.initGoogleMap.js.swo
new file mode 100644
index 00000000..c1c22fd5
Binary files /dev/null and b/templates/map/.initGoogleMap.js.swo differ
diff --git a/templates/map/initBingMap.js b/templates/map/initBingMap.js
new file mode 100644
index 00000000..0183fe54
--- /dev/null
+++ b/templates/map/initBingMap.js
@@ -0,0 +1,36 @@
+<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=initMap&key={{ bingmaps_api_key|raw }}' async defer></script>
+
+<script>
+function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
+    var map_type_id = Microsoft.Maps.MapTypeId.road;
+    switch (map_type) {
+        case 'road':
+            map_type_id = Microsoft.Maps.MapTypeId.road;
+            break;
+        case 'aerial':
+            map_type_id = Microsoft.Maps.MapTypeId.aerial;
+            break;
+        case 'dark':
+            map_type_id = Microsoft.Maps.MapTypeId.canvasDark;
+            break;
+        case 'light':
+            map_type_id = Microsoft.Maps.MapTypeId.canvasLight;
+            break;
+        case 'grayscale':
+            map_type_id = Microsoft.Maps.MapTypeId.grayscale;
+            break;
+        default:
+            map_type_id = Microsoft.Maps.MapTypeId.road;
+            break;
+    }
+
+    var map = new Microsoft.Maps.Map('#' + div_id, {
+        center: new Microsoft.Maps.Location(center_lat, center_lng),
+        mapTypeId: map_type_id,
+        zoom: zoom
+    });
+
+    return map;
+}
+</script>
+
diff --git a/templates/map/initGoogleMap.js b/templates/map/initGoogleMap.js
new file mode 100644
index 00000000..51349ae2
--- /dev/null
+++ b/templates/map/initGoogleMap.js
@@ -0,0 +1,22 @@
+<script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key|raw }}&callback=initMap" type="text/javascript" async defer></script>
+
+<script>
+function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
+    var map_type_id = 'roadmap';
+    switch (map_type) {
+        case 'road':
+            map_type_id = 'roadmap';
+            break;
+        default:
+            map_type_id = 'roadmap';
+            break;
+    }
+
+    var map = new google.maps.Map(document.getElementById(div_id),
+    {
+        center: {lat: center_lat, lng: center_lng},
+        mapTypeId: map_type_id,
+        zoom: zoom
+    });
+}
+</script>
diff --git a/templates/map/initOpenStreetMap.js b/templates/map/initOpenStreetMap.js
new file mode 100644
index 00000000..6bf85690
--- /dev/null
+++ b/templates/map/initOpenStreetMap.js
@@ -0,0 +1,23 @@
+<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+    crossorigin="">
+</script>
+
+<script>
+
+function mapCreate(div_id, center_lat, center_lng, map_type, zoom) {
+    var map = L.map(div_id).setView(
+        [center_lat, center_lng],
+        zoom
+    );
+
+    // add tile layer
+    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+         maxZoom: 18,
+         id: 'mapbox/streets-v11',
+         accessToken: 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw'
+     }).addTo(map);
+}
+
+</script>