diff --git a/plasmoid/contents/code/maps.css b/plasmoid/contents/code/maps.css
new file mode 100644
--- /dev/null
+++ b/plasmoid/contents/code/maps.css
@@ -0,0 +1,5 @@
+img {
+    width: 100% !important;
+    height: 100% !important;
+    max-width:100% !important;
+}
diff --git a/plasmoid/contents/images/destination.png b/plasmoid/contents/images/destination.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/plasmoid/contents/images/turnleft.png b/plasmoid/contents/images/turnleft.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/plasmoid/contents/images/turnnorth.png b/plasmoid/contents/images/turnnorth.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/plasmoid/contents/images/turnramp.png b/plasmoid/contents/images/turnramp.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/plasmoid/contents/images/turnright.png b/plasmoid/contents/images/turnright.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/plasmoid/contents/images/turnuturn.png b/plasmoid/contents/images/turnuturn.png
new file mode 100644
index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

literal 0
Hc$@<O00001

diff --git a/plasmoid/contents/ui/NavigationDelegate.qml b/plasmoid/contents/ui/NavigationDelegate.qml
new file mode 100644
--- /dev/null
+++ b/plasmoid/contents/ui/NavigationDelegate.qml
@@ -0,0 +1,101 @@
+import QtQuick 2.9
+import QtQml.Models 2.2
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import Qt.WebSockets 1.0
+import Qt.labs.settings 1.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.plasmoid 2.0
+import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.extras 2.0 as PlasmaExtras
+import QtWebKit 3.0
+import QtWebKit.experimental 1.0
+import QtGraphicalEffects 1.0
+
+Rectangle {
+        id: navMapDelegateItm
+        height: units.gridUnit * 5
+        width: parent.width
+        color: theme.backgroundColor
+
+        function filterDirection(getInfo){
+           var keyleft = ["left","east"]
+           var keyright = ["right", "west"]
+           var keynorth = ["north", "Head"]
+           var keyuturn = ["U-Turn", "u-turn"]
+           var keyramp = ["ramp", "Ramp"]
+           var keyarrive = ["Arrive", "arrive"]
+           for (var i=0; i<keyleft.length; i++){
+           if (getInfo.indexOf(keyleft[i]) != -1) {
+                    navMapDirectionsImg.source = "../images/turnleft.png";
+            }
+            else if (getInfo.indexOf(keyright[i]) != -1) {
+                    navMapDirectionsImg.source = "../images/turnright.png";
+            }
+            else if (getInfo.indexOf(keynorth[i]) != -1) {
+                    navMapDirectionsImg.source = "../images/turnnorth.png";
+            }
+            else if (getInfo.indexOf(keyuturn[i]) != -1) {
+                    navMapDirectionsImg.source = "../images/turnuturn.png";
+              }
+           else if (getInfo.indexOf(keyramp[i]) != -1) {
+                   navMapDirectionsImg.source = "../images/turnramp.png";
+             }
+           else if (getInfo.indexOf(keyarrive[i]) != -1) {
+                   navMapDirectionsImg.source = "../images/destination.png";
+             }
+           }
+        }
+
+     Row {
+         id: navMapRow
+         spacing: 4
+
+        Image {
+            id: navMapDirectionsImg
+            width: 0
+            height: 64
+            visible: false
+            anchors.margins: units.gridUnit * 2
+        }
+
+        ColorOverlay{
+        anchors.top: navMapDirectionsImg.top
+        anchors.bottom: navMapDirectionsImg.bottom
+        width: 64
+        source: navMapDirectionsImg
+        color: theme.linkColor
+        }
+
+        Rectangle {
+          id: vertsepNav
+          anchors.top: parent.top
+          anchors.bottom: parent.bottom
+          anchors.topMargin: units.gridUnit * 0.5
+          anchors.bottomMargin: units.gridUnit * 0.5
+          color: theme.linkColor
+          width: 1
+        }
+
+        Label {
+          id: navMapDelegateItmLabel
+          color: theme.textColor
+          anchors.verticalCenter: parent.verticalCenter
+          text: navInstruction
+          Rectangle {
+              anchors {
+                  left: parent.left
+                  right: parent.right
+                  bottom: parent.bottom
+                  bottomMargin: units.gridUnit * -0.2
+                 }
+                height: 1
+              color: theme.linkColor
+             }
+          onTextChanged: {
+            filterDirection(navInstruction)
+          }
+        }
+     }
+}
+
diff --git a/plasmoid/contents/ui/PlacesDelegate.qml b/plasmoid/contents/ui/PlacesDelegate.qml
--- a/plasmoid/contents/ui/PlacesDelegate.qml
+++ b/plasmoid/contents/ui/PlacesDelegate.qml
@@ -13,6 +13,27 @@
         anchors.left: parent.left
         anchors.right: parent.right
         width: placesmodelview.view.width
+        
+        function getRouteInformation(llat, llong, dlat, dlong, oappid, oappcode){
+            var routedoc = new XMLHttpRequest()
+            var url = "https://route.cit.api.here.com/routing/7.2/calculateroute.json?waypoint0=" + llat + "," + llong + "&waypoint1=" + dlat + "," + dlong + "&mode=fastest;car;&app_id=" + oappid + "&app_code=" + oappcode + "&depature=now"
+            routedoc.open("GET", url, true);
+            routedoc.send()
+
+            routedoc.onreadystatechange = function() {
+                 if (routedoc.readyState === XMLHttpRequest.DONE && routedoc.responseText !== "undefined") {
+                     var reqroute = routedoc.responseText
+                     if (reqroute !== "undefined") {
+                            var filterRouteDict = JSON.parse(reqroute)
+                            for (var i = 0; i<filterRouteDict.response.route[0].leg[0].maneuver.length; i++){
+                            var getRouteDict = filterRouteDict.response.route[0].leg[0].maneuver[i].instruction
+                            console.log(JSON.stringify(getRouteDict))
+                            routeLmodel.append({navInstruction: getRouteDict});
+                          }
+                       }
+                    }
+                }
+            }
 
         ColumnLayout {
             id: contentdlgtitem
@@ -80,10 +101,13 @@
 
                        onClicked: {
                          var navpos = placeposition.replace(/[[\]]/g,'').split(",");
-                         Qt.openUrlExternally("https://www.google.co.in/maps/place/" + placetitle + "/@" + navpos[0] + "," + navpos[1] + ",17z");
+                         getRouteInformation(placelocallat, placelocallong, navpos[0], navpos[1], placeappid, placeappcode)
+                         var formatedurl =   "https://image.maps.cit.api.here.com/mia/1.6/mapview?c=" + placelocallat + "," + placelocallong + "&z=16&poi=" + navpos[0] + "," + navpos[1] + "&poithm=0&app_id=" + placeappid + "&app_code=" + placeappcode + "&h=" + cbheight / 2 + "&w=" + cbwidth + "&ppi=500ppi=120&t=7&f=2&i=true"
+                         navMapDrawer.open()
+                         navMapDrawer.getURL = formatedurl
                        }
                     }
-              }
+                }
                     }
 
             PlasmaComponents.Label {
diff --git a/plasmoid/contents/ui/PlacesType.qml b/plasmoid/contents/ui/PlacesType.qml
--- a/plasmoid/contents/ui/PlacesType.qml
+++ b/plasmoid/contents/ui/PlacesType.qml
@@ -5,12 +5,23 @@
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.plasmoid 2.0
 import org.kde.plasma.components 2.0 as PlasmaComponents
+import QtWebKit 3.0
+import QtWebKit.experimental 1.0
 
 Rectangle {
     id: partclc
-    height: units.gridUnit * 15
+    height: cbheight
     width: cbwidth
     color: theme.backgroundColor
+    property alias routeLmodel: routeListModel
+    
+    Component.onCompleted: {
+        console.log(cbheight)
+    }
+    
+ListModel {
+        id: routeListModel
+}
 
 ListView {
      id: placesmodelview
@@ -27,5 +38,50 @@
         snapMode : ScrollBar.SnapAlways
       }
     }
+
+Drawer {
+    id: navMapDrawer
+    width: parent.width
+    height: cbdrawercontentheight
+    edge: Qt.RightEdge
+    dragMargin: 0
+    property alias getURL: navMapView.url
+
+    Rectangle {
+            id: navParentRect
+            width: parent.width
+            height: parent.height
+            color: Qt.lighter(theme.backgroundColor, 1.2)
+
+        WebView {
+            id: navMapView
+            width: parent.width
+            height: parent.height / 2
+            experimental.useDefaultContentItemSize: true
+            experimental.userStyleSheets: "../code/maps.css"
+            experimental.page.height: navMapView.height
+            experimental.page.width: parent.width
+            }
+
+        ListView {
+            id: navMapDirections
+            anchors.top: navMapView.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            model: routeLmodel
+            spacing: 2
+            focus: false
+            interactive: true
+            clip: true;
+            delegate: NavigationDelegate{}
+            ScrollBar.vertical: ScrollBar {
+               active: true
+               policy: ScrollBar.AlwaysOn
+               snapMode : ScrollBar.SnapAlways
+           }
+         }
+      }
+   }
 }
  
diff --git a/plasmoid/contents/ui/main.qml b/plasmoid/contents/ui/main.qml
--- a/plasmoid/contents/ui/main.qml
+++ b/plasmoid/contents/ui/main.qml
@@ -48,6 +48,8 @@
     
     property var skillList: []
     property alias cbwidth: rectangle2.width
+    property alias cbheight: rectangle2.height
+    property var cbdrawercontentheight: parent.height + units.gridUnit * 0.5 - rectanglebottombar.height
     property string defaultmcorestartpath: "/usr/share/plasma/plasmoids/org.kde.plasma.mycroftplasmoid/contents/code/startservice.sh"
     property string defaultmcorestoppath: "/usr/share/plasma/plasmoids/org.kde.plasma.mycroftplasmoid/contents/code/stopservice.sh"
     property string packagemcorestartcmd: "/usr/share/plasma/plasmoids/org.kde.plasma.mycroftplasmoid/contents/code/pkgstartservice.sh"
@@ -146,13 +148,17 @@
           
     function filterplacesObj(metadata){
         var filteredData = JSON.parse(metadata.data);
+        var locallat = JSON.parse(metadata.locallat);
+        var locallong = JSON.parse(metadata.locallong);
+        var hereappid = metadata.appid
+        var hereappcode = metadata.appcode;
         convoLmodel.clear()
         placesListModel.clear()
         for (var i = 0; i < filteredData.results.items.length; i++){
             var itemsInPlaces = JSON.stringify(filteredData.results.items[i])
             var fltritemsinPlc = JSON.parse(itemsInPlaces)
             var fltrtags = getTags(filteredData.results.items[i].tags)
-            placesListModel.insert(i, {placeposition: JSON.stringify(fltritemsinPlc.position), placetitle: JSON.stringify(fltritemsinPlc.title), placedistance: JSON.stringify(fltritemsinPlc.distance), placeloc: JSON.stringify(fltritemsinPlc.vicinity), placetags: fltrtags})
+            placesListModel.insert(i, {placeposition: JSON.stringify(fltritemsinPlc.position), placetitle: JSON.stringify(fltritemsinPlc.title), placedistance: JSON.stringify(fltritemsinPlc.distance), placeloc: JSON.stringify(fltritemsinPlc.vicinity), placetags: fltrtags, placelocallat: locallat, placelocallong: locallong, placeappid: hereappid, placeappcode: hereappcode})
         }
         convoLmodel.append({"itemType": "PlacesType", "InputQuery": ""});
     }