diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 572390e1a..7fa3d6ea3 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -884,6 +884,7 @@
       "resolved": "https://registry.npmjs.org/base64id/-/base64id-1.0.0.tgz",
       "integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY="
     },
+    
     "bcrypt-pbkdf": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
diff --git a/package.json b/package.json
index 533cda521..3465889b4 100644
--- a/package.json
+++ b/package.json
@@ -83,4 +83,4 @@
     "eslint": "^4.19.1",
     "husky": "^0.14.3"
   }
-}
+}
\ No newline at end of file
diff --git a/src/backend/assets/js/map.js b/src/backend/assets/js/map.js
index 1e59af376..ff969e84e 100644
--- a/src/backend/assets/js/map.js
+++ b/src/backend/assets/js/map.js
@@ -1,110 +1,144 @@
-let initMap = function () {
+
   let mapword = document.getElementById('mappos').value;
   let maparray = mapword.split(',');
   let latitude = parseFloat(maparray[0]);
   let longitude =  parseFloat(maparray[1]);
   let myLatLng = {lat: latitude, lng:longitude};
+  let myLngLat = {lng: longitude, lat:latitude};
   let map;
-  const theme  = parseInt(document.getElementById('theme').value);
-
-  if(theme)
+  let googleMarker;
+  let osmMarker;
+  const theme   = parseInt(document.getElementById('theme').value);
+  const mapType = parseInt(document.getElementById('mapType').value);
+  
+  //  Selects the type of map - OSM OR Google maps 
+  if(mapType)
     {
-      map = new google.maps.Map(document.getElementById('map'), {
-        zoom: 16,
-        center: myLatLng,
-        styles: [
-          {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
-          {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
-          {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
-          {
-            featureType: 'administrative.locality',
-            elementType: 'labels.text.fill',
-            stylers: [{color: '#d59563'}]
-          },
-          {
-            featureType: 'poi',
-            elementType: 'labels.text.fill',
-            stylers: [{color: '#d59563'}]
-          },
-          {
-            featureType: 'poi.park',
-            elementType: 'geometry',
-            stylers: [{color: '#263c3f'}]
-          },
-          {
-            featureType: 'poi.park',
-            elementType: 'labels.text.fill',
-            stylers: [{color: '#6b9a76'}]
-          },
-          {
-            featureType: 'road',
-            elementType: 'geometry',
-            stylers: [{color: '#38414e'}]
-          },
-          {
-            featureType: 'road',
-            elementType: 'geometry.stroke',
-            stylers: [{color: '#212a37'}]
-          },
-          {
-            featureType: 'road',
-            elementType: 'labels.text.fill',
-            stylers: [{color: '#9ca5b3'}]
+      if(theme){
+        map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 16,
+          center: myLatLng,
+          styles: [
+            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
+            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
+            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
+            {
+              featureType: 'administrative.locality',
+              elementType: 'labels.text.fill',
+              stylers: [{color: '#d59563'}]
+            },
+            {
+              featureType: 'poi',
+              elementType: 'labels.text.fill',
+              stylers: [{color: '#d59563'}]
+            },
+            {
+              featureType: 'poi.park',
+              elementType: 'geometry',
+              stylers: [{color: '#263c3f'}]
+            },
+            {
+              featureType: 'poi.park',
+              elementType: 'labels.text.fill',
+              stylers: [{color: '#6b9a76'}]
+            },
+            {
+              featureType: 'road',
+              elementType: 'geometry',
+              stylers: [{color: '#38414e'}]
+            },
+            {
+              featureType: 'road',
+              elementType: 'geometry.stroke',
+              stylers: [{color: '#212a37'}]
+            },
+            {
+              featureType: 'road',
+              elementType: 'labels.text.fill',
+              stylers: [{color: '#9ca5b3'}]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'geometry',
+              stylers: [{color: '#746855'}]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'geometry.stroke',
+              stylers: [{color: '#1f2835'}]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'labels.text.fill',
+              stylers: [{color: '#f3d19c'}]
+            },
+            {
+              featureType: 'transit',
+              elementType: 'geometry',
+              stylers: [{color: '#2f3948'}]
+            },
+            {
+              featureType: 'transit.station',
+              elementType: 'labels.text.fill',
+              stylers: [{color: '#d59563'}]
+            },
+            {
+              featureType: 'water',
+              elementType: 'geometry',
+              stylers: [{color: '#17263c'}]
+            },
+            {
+              featureType: 'water',
+              elementType: 'labels.text.fill',
+              stylers: [{color: '#515c6d'}]
           },
           {
-            featureType: 'road.highway',
-            elementType: 'geometry',
-            stylers: [{color: '#746855'}]
-          },
-          {
-            featureType: 'road.highway',
-            elementType: 'geometry.stroke',
-            stylers: [{color: '#1f2835'}]
-          },
-          {
-            featureType: 'road.highway',
-            elementType: 'labels.text.fill',
-            stylers: [{color: '#f3d19c'}]
-          },
-          {
-            featureType: 'transit',
-            elementType: 'geometry',
-            stylers: [{color: '#2f3948'}]
-          },
-          {
-            featureType: 'transit.station',
-            elementType: 'labels.text.fill',
-            stylers: [{color: '#d59563'}]
-          },
-          {
-            featureType: 'water',
-            elementType: 'geometry',
-            stylers: [{color: '#17263c'}]
-          },
-          {
-            featureType: 'water',
-            elementType: 'labels.text.fill',
-            stylers: [{color: '#515c6d'}]
-        },
-        {
-            featureType: 'water',
-            elementType: 'labels.text.stroke',
-            stylers: [{color: '#17263c'}]
-        }
-        ]
-      });
-    }
-    else{
-      map = new google.maps.Map(document.getElementById('map'), {
-        zoom: 16,
-        center: myLatLng
+              featureType: 'water',
+              elementType: 'labels.text.stroke',
+              stylers: [{color: '#17263c'}]
+          }
+          ]
+        });
+      } else{
+        map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 16,
+          center: myLatLng
+        });
+      }
+
+      googleMarker = new google.maps.Marker({
+        position: myLatLng,
+        map: map
       });
-    }
 
-  let marker = new google.maps.Marker({
-    position: myLatLng,
-    map: map
-  });
-};
+    } else{
+
+      mapboxgl.accessToken = 'pk.eyJ1IjoiaGFyc2hrYXNoeWFwIiwiYSI6ImNqbjc0ZGRpcDAxZGIzcHA4MHduN3dkdDgifQ.YO4DvPlp5O7VTvlB0K4d0Q';
+        
+      if(theme){
+        map = new mapboxgl.Map({
+          container: 'map',
+          zoom: 16,
+          center : myLngLat,
+          scrollZoom : false,
+          style: 'mapbox://styles/mapbox/navigation-preview-night-v4'
+        });
+      } else{
+        map = new mapboxgl.Map({
+          container: 'map',
+          zoom: 16,
+          center : myLngLat,
+          scrollZoom : false,
+          // style: 'mapbox://styles/mapbox/streets-v10'
+          style: 'mapbox://styles/mapbox/navigation-preview-day-v4'
+        });        
+      }
 
-window.initMap = initMap;
+      osmMarker = new mapboxgl.Marker()
+          .setLngLat(myLngLat)
+          .addTo(map);
+      
+      var nav = new mapboxgl.NavigationControl();
+      map.addControl(nav, 'bottom-right');
+      map.addControl(new mapboxgl.FullscreenControl());
+    }
\ No newline at end of file
diff --git a/src/backend/generator.js b/src/backend/generator.js
index 0dd06212b..927143dcb 100644
--- a/src/backend/generator.js
+++ b/src/backend/generator.js
@@ -537,8 +537,7 @@ exports.createDistDir = function(req, socket, callback) {
         }
         logger.addLog('Info', 'Compiling the html pages from the templates', socket);
 
-        const jsonData = data;
-
+        const jsonData = data;      
         eventName = fold.removeSpace(jsonData.eventurls.name);
         const backPath = distHelper.distPath + '/' + appFolder + '/' + jsonData.eventurls.background_path;
         const basePath = distHelper.distPath + '/' + appFolder + '/images';
@@ -561,6 +560,12 @@ exports.createDistDir = function(req, socket, callback) {
             jsonData.theme = 1;
           }
 
+          if (req.body.map === 'googleMap') {
+            jsonData.map = 1;
+          } else {
+            jsonData.map = 0;
+          }
+
           if (req.body.ganalyticsID) {
             jsonData.ganalyticsID = req.body.ganalyticsID;
           }
diff --git a/src/backend/templates/event.hbs b/src/backend/templates/event.hbs
index 6ece21c78..60c9a392a 100644
--- a/src/backend/templates/event.hbs
+++ b/src/backend/templates/event.hbs
@@ -11,7 +11,7 @@
     <link rel="preload" as="style" href="./css/bootstrap.min.css">
     <link rel="manifest" href="./manifest.json">
     <link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" crossorigin>
-
+   
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -31,6 +31,10 @@
     <link rel="stylesheet" href="./css/bootstrap.min.css">
     <link rel="stylesheet" href="./css/schedule.css">
 
+    <!-- Mapbox GL JS Javascript and CSS files for OSM-->
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js" type="text/javascript"></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
+  
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -208,7 +212,7 @@
       </div>
     {{/if}}
 
-    {{#if eventurls.latitude }}
+    {{#if eventurls.latitude}}
       {{#if eventurls.longitude}}
         <div class="location">
           <div class="location-map row">
@@ -233,13 +237,14 @@
 
     <input type="hidden" id="mappos" value="{{{eventurls.latitude}}},{{{eventurls.longitude}}}"/>
     <input type="hidden" id="theme" value={{theme}} />
-
+    <input type="hidden" id="mapType" value={{map}} />
+  
     {{> footer}}
 
     <script src="./js/jquery.min.js"></script>
     <script src="./js/bootstrap.min.js" type="text/javascript"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCd_L2ncYmf3Yyr6Or01E_ze6QEv289HYs" type="text/javascript"></script>
     <script type="text/javascript" src="./js/event.min.js"></script>
-    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCd_L2ncYmf3Yyr6Or01E_ze6QEv289HYs&callback=initMap" type="text/javascript"></script>
     <!--<script src="//platform.twitter.com/widgets.js" charset="utf-8"></script>-->
 
     <script>
diff --git a/src/www/index.html b/src/www/index.html
index 9dad5ae00..226cef6fc 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -303,6 +303,24 @@
             <label for="expandable">Expandable</label>
           </li>
         </ul>
+        
+        
+        <!-- Map Integration-->
+        <label>Choose Map Integration</label>
+
+        <ul style="list-style-type:none;postion: relative;">
+          <li>
+            <input id="google" name="map" type="radio" value="googleMap">
+            <label for="google">Google_Map</label>
+          </li>
+
+          <li>
+            <input id="open_street" name="map" type="radio" value="openStreetMap">
+            <label for="open_street">Open_Street_Map</label>
+          </li>
+        </ul>
+
+      
         <label>Choose your API version</label>
         <ul style="list-style-type:none">
           <!--<li><input type="radio" name="datasource" value="mockjson"> Default mock API </input></li>-->
@@ -315,6 +333,7 @@
             <label for="version2">API_v2</label>
           </li>
         </ul>
+
         <!-- changes-2 added till here -->
         <label>Choose your data source</label>
         <ul style="list-style-type:none">
diff --git a/src/www/js/form.js b/src/www/js/form.js
index 503d57d1c..7d17d9e66 100644
--- a/src/www/js/form.js
+++ b/src/www/js/form.js
@@ -546,6 +546,9 @@ function getData(initValue) {
     if (field.name === 'apiVersion') {
       data.apiVersion = field.value;
     }
+    if (field.name === 'map') {
+      data.map = field.value;
+    }
   });
   if ($('#upload-ftp').prop('checked')) {
     data.ftpdetails = {