diff --git a/config/routes/rider.yaml b/config/routes/rider.yaml
index 1975e999..6c4911d0 100644
--- a/config/routes/rider.yaml
+++ b/config/routes/rider.yaml
@@ -63,7 +63,7 @@ rider_ajax_avialable:
     methods: [GET]
 
 rider_ajax_rider_name:
-    path: /riders/rider_name
+    path: /riders/{id}/name
     controller: App\Controller\RiderController::ajaxRiderName
     methods: [GET]
 
diff --git a/public/assets/js/dashboard_map.js b/public/assets/js/dashboard_map.js
index 5aa98996..5d753cab 100644
--- a/public/assets/js/dashboard_map.js
+++ b/public/assets/js/dashboard_map.js
@@ -303,35 +303,43 @@ class DashboardMap {
             $.each(riders, function(id, data) {
                 var lat = data.latitude;
                 var lng = data.longitude;
-                var name = my.getRiderName(id);
+                var name = '';
 
-                if (data.has_jo)
-                    my.putRiderActiveJOMarker(id, lat, lng, name);
-                else
-                    my.putRiderAvailableMarker(id, lat, lng, name);
+                if (my.rider_names.hasOwnProperty(id)) {
+                    name = my.rider_names[id];
+
+                    if (data.has_jo)
+                        my.putRiderActiveJOMarker(id, lat, lng, name);
+                    else
+                        my.putRiderAvailableMarker(id, lat, lng, name)
+
+                } else {
+                    getRiderName(id, my.options.rider_name_url, function(name) {
+                        my.rider_names[id] = name;
+
+                        if (data.has_jo)
+                            my.putRiderActiveJOMarker(id, lat, lng, name);
+                        else
+                            my.putRiderAvailableMarker(id, lat, lng, name)
+                    });
+                }
             });
 
             // console.log(rider_markers);
         });
     }
-
-    getRiderName(rider_id) {
-        // check if rider id and name in rider_names
-        var name = '';
-        if (this.rider_names.hasOwnProperty(rider_id)) {
-            name = this.rider_names[rider_id];
-        } else {
-            // ajax call to get rider name
-            $.ajax({
-                method: "GET",
-                url: "{{ url('rider_ajax_rider_name')|raw }}",
-                data: {id: rider_id}
-            }).done(function(response) {
-                name = response.rider_name;
-                this.rider_names[rider_id] = name;
-            });
-        }
-
-        return name;
-    }
 }
+
+function getRiderName(id, url, callback) {
+    var name = '';
+    var rider_url = url.replace('[id]', id);
+
+    $.ajax({
+        method: "GET",
+        url: rider_url
+    }).done(function(response) {
+        name = response.rider_name;
+        callback(name);
+    });
+}
+ 
diff --git a/src/Controller/RiderController.php b/src/Controller/RiderController.php
index b398f18d..763d4900 100644
--- a/src/Controller/RiderController.php
+++ b/src/Controller/RiderController.php
@@ -616,11 +616,11 @@ class RiderController extends Controller
         return $response;
     }
 
-    public function ajaxRiderName(EntityManagerInterface $em, Request $req)
+    /**
+     * @ParamConverter("rider", class="App\Entity\Rider")
+     */
+    public function ajaxRiderName(EntityManagerInterface $em, Rider $rider)
     {
-        $rider_id = $req->query->get('id');
-
-        $rider = $em->getRepository(Rider::class)->find($rider_id);
         $rider_name = '';
         if ($rider != null)
             $rider_name = $rider->getFullName();
diff --git a/templates/home.html.twig b/templates/home.html.twig
index 69cb59c0..9e784ab6 100644
--- a/templates/home.html.twig
+++ b/templates/home.html.twig
@@ -35,7 +35,8 @@ function initMap(r_markers, c_markers, icons) {
         'zoom': 13,
         'rider_popup_url': '/riders/[id]/popup',
         'cust_popup_url': '/job-order/[id]/popup',
-        'icons': icons
+        'icons': icons,
+        'rider_name_url': '/riders/[id]/name'
     };
 
     var dashmap = new DashboardMap(options, r_markers, c_markers);