diff --git a/fleet_management/fleet_management/doctype/trip/trip_list.js b/fleet_management/fleet_management/doctype/trip/trip_list.js
index cee1b74..806846d 100644
--- a/fleet_management/fleet_management/doctype/trip/trip_list.js
+++ b/fleet_management/fleet_management/doctype/trip/trip_list.js
@@ -8,7 +8,7 @@ function loadLeafletAndInitMap(frm, callback) {
 function create_dialog_and_init_map(frm) {
     const dialog = new frappe.ui.Dialog({
         title: 'Show Route',
-        fields: [{ fieldtype: 'HTML', fieldname: 'map_html', label: 'Map', options: ' < div id="map" style="width:100%;height:100%;" ></div>' }],
+        fields: [{ fieldtype: 'HTML', fieldname: 'map_html', label: 'Map', options: '<div id="map" style="width:100%;height:100%;"></div>' }],
         primary_action_label: 'Close',
         primary_action() {
             if (currentMap) {
@@ -31,7 +31,16 @@ function create_dialog_and_init_map(frm) {
     };
 
     dialog.show();
-    setTimeout(() => init_map(frm), 500); // Add a delay to ensure the map loads correctly
+
+    // Ensure the map container expands to fit its parent after the dialog is shown
+    setTimeout(() => {
+        const mapElement = document.getElementById('map');
+        if (mapElement) {
+            mapElement.style.width = "100%";
+            mapElement.style.height = "100%";
+            init_map(frm); // Initialize the map
+        }
+    }, 500); // Add a delay to ensure the map loads correctly
 }
 
 var currentMap = null;
@@ -127,11 +136,6 @@ function init_map(frm) {
 
 function show_map(frm) {
     console.log("Loading map...");
-
-    // Ensure the map container expands to fit its parent
-    document.getElementById('map').style.width = "100%";
-    document.getElementById('map').style.height = "100%";
-
     loadLeafletAndInitMap(frm, create_dialog_and_init_map);
 }