Directions from Hanoi to Ho Chi Minh City<\/title>\n <script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.7.0\/mapbox-gl.js\"><\/script>\n <link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.7.0\/mapbox-gl.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/unpkg.com\/html2canvas@0.5.0-beta4\/dist\/html2canvas.min.js\"><\/script>\n\n <style>\n#wa {\n display: none !important;\n}\n\/* Set a specific height for the map container *\/\n#map {\n height: 100vh;\n width:70%;\n}\n#wrap{\ndisplay:flex;\njustify-content:center;\nalign-items:center;\n}\n\n.numbered-marker{\nwidth:0; height:0;}\n\n.numbered-marker span {\n display:flex;\n justify-content:center;\n align-items:center;\n box-sizing:border-box;\n width: 30px;\n height: 30px;\n color:#fff;\n background: #693;\n border:solid 2px;\n border-radius: 0 70% 70%;\n box-shadow:0 0 2px #000;\n cursor: pointer;\n transform-origin:0 0;\n transform: rotateZ(-135deg);\n}\n.numbered-marker b{\ntransform: rotateZ(135deg)}\n\n\n\/* Style for the itinerary *\/\n#itinerary-container {\n max-width: 400px;\n margin: 20px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n background-color: #f9f9f9;\n}\n\n.itinerary-item {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.itinerary-number {\n margin-right: 10px;\n font-weight: bold;\n}\n <\/style>\n<\/head>\n<body>\n\n\n \n<div id=\"wrap\">\t\t\t\n<div id=\"itinerary\">\n<div class=\"tab-content\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<div id=\"nb-2-configurations\" class=\"nb-2-configurations nb-configurations\" style=\"display: block;\">\n\t\t\t\t\t\t\t<div class=\"wte-itinerary-header-wrapper\">\n\t\t\t\t<div class=\"wp-travel-engine-itinerary-header\">\n\t\t\t\t\t<h2 class=\"wpte-itinerary-title\">Itinerary<\/h2>\n\t\t\t\t\t<div class=\"aib-button-toggle toggle-button expand-all-button\">\n\t\t\t\t\t\t<label for=\"itinerary-toggle-button\" class=\"aib-button-label\">Expand all<\/label>\n\t\t\t\t\t\t<input id=\"itinerary-toggle-button\" type=\"checkbox\" class=\"checkbox\" checked=\"\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<div class=\"post-data itinerary wte-trip-itinerary-v2\">\n\t\t\t\t<div class=\"itinerary-row active\">\n\t\t\t\t<div class=\"wte-itinerary-head-wrap\">\n\t\t\t\t\t<div class=\"title\">Day 1 : <\/div>\n\t\t\t\t\t<a class=\"accordion-tabs-toggle active\" href=\"javascript:void(0);\">\n\t\t\t\t\t\t<span class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"><\/span>\n\t\t\t\t\t\t<div class=\"itinerary-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t03 Hours\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t<style id=\"itinerary-content-show\"> .itinerary-content{ disply:block!important; } <\/style>\t\t\t\t<div class=\"itinerary-content show\" style=\"display:block;\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<p>Enjoy an enchanting trip with a serene bamboo boat ride along the picturesque Co Co River in Hoi An, capturing the stunning sunset views. The idyllic riverside setting near The Field restaurant sets the stage for a romantic dining experience. Enjoy culinary delight with a menu that includes fresh catches from the surrounding river and locally sourced vegetables, promising a unique and charming rural atmosphere during your stay.<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n<script>\n\t;(function() {\n\t\tvar toggleTab = function(row, force = null) {\n\t\t\tvar content = row.querySelector(\".itinerary-content\")\n\t\t\tvar toggler = row.querySelector(\".accordion-tabs-toggle\")\n\t\t\tvar condition = force === null ? ! toggler.classList.contains(\"active\") : force\n\t\t\tvar height = content.scrollHeight\n\t\t\tcontent.classList.toggle(\"active\", condition)\n\t\t\tif(condition) content.style.maxHeight = height + \"px\"\n\t\t\telse content.style.maxHeight = \"0px\"\n\t\t\ttoggler.classList.toggle(\"active\", condition)\n\t\t}\n\n\t\tvar handleToggleClick = function(row) {\n\t\t\treturn function(event) {\n\t\t\t\tvar target = event.target\n\t\t\t\tif(!!target.closest(\".wte-itinerary-head-wrap\")) {\n\t\t\t\t\ttoggleTab(row)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tvar setContentHeight = function(row) {\n\t\t\tvar content = row.querySelector(\".itinerary-content\")\n\t\t\tvar scrollHeight = content.scrollHeight\n\t\t\tif(content.classList.contains(\"active\"))\n\t\t\t\tcontent.style.maxHeight = (scrollHeight) + \"px\"\n\t\t\telse\tcontent.style.maxHeight = \"0px\"\n\t\t}\n\n\t\tvar wrapper = document.querySelector(\".wte-trip-itinerary-v2\")\n\t\tif ( wrapper ) {\n\t\t\tvar expandall = document.getElementById('itinerary-toggle-button')\n\t\t\tvar rows = wrapper.querySelectorAll('.itinerary-row')\n\t\t\tif(expandall) {\n\t\t\t\texpandall.addEventListener(\"change\", function() {\n\t\t\t\t\tif(rows) rows.forEach(row => {\n\t\t\t\t\t\ttoggleTab(row, this.checked)\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\t\t\tif ( rows ) {\n\t\t\t\trows.forEach(function(row) {\n\t\t\t\t\t\/\/ setContentHeight(row)\n\t\t\t\t\trow.addEventListener('click', handleToggleClick(row))\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t})();\n<\/script>\n\t\t\t<\/div><div id=\"nb-3-configurations\" class=\"nb-3-configurations nb-configurations\" style=\" display:none;\">\n\t\t\t\t\n\n<div class=\"post-data cost\">\n\t<h2 class=\"wpte-cost-tab-title\">Services<\/h2>\t<div class=\"content\">\n\t\t<h3>Included<\/h3>\t\t<ul id=\"include-result\">\n\t\t\t<li>–\tDinner at The Field restaurant.<\/li><li>–\tPrivate transport as mentioned in the program.<\/li><li>–\tLocal guides with a lot of experience.<\/li><li>–\tTickets and boat excursion as mentioned in the program. <\/li><li>–\tAll operating service charges.<\/li>\t\t<\/ul>\n\t\t\t<\/div>\n\t<div class=\"content\">\n\t\t<h3>Excluded<\/h3>\t\t<ul id=\"exclude-result\">\n\t\t\t<li>–\tOnline visa.<\/li><li>–\tDrinks and meals not specified in the itinerary.<\/li><li>–\tOther services not mentioned in the list of included services.<\/li>\t\t<\/ul>\n\t\t\t<\/div>\n<\/div>\n\n\t\t\t<\/div><div id=\"nb-6-configurations\" class=\"nb-6-configurations nb-configurations\" style=\"display: none;\">\n\t\t\t\t\n\n<div class=\"post-data\">\n\t\t<div class=\"content\">\n\t\t\t\t\t<div class=\"trip-map iframe\">\n\t\t\t\t<iframe loading=\"lazy\" src=\"https:\/\/epictripasia.com\/maps\/vietnam-enchanting-bamboo-raft-dining-experience\/\" width=\"600\" height=\"700\" style=\"border:0\" allowfullscreen=\"\"><\/iframe>\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n\t\t\t<\/div><div id=\"nb-7-configurations\" class=\"nb-7-configurations nb-configurations\" style=\" display:none;\">\n\t\t\t\t\n\n<div class=\"post-data highlights\">\n<h2 class=\"wpte-7-title\">Highlight<\/h2>\t\n\t\t\t<ul>\n<li>Visit: Co Co river \u2013 The Field restaurant<\/li>\n<li>Bamboo boat ride<\/li>\n<li>Sunset views<\/li>\n<li>Romantic landscape<\/li>\n<\/ul>\n\t\t\n\n<\/div>\n\t\t\t<\/div><\/div>\n<\/div>\t\t\t\n<div class=\"wrapper-map\">\t\t\t\n\t<div id=\"itinerary-container\"><\/div>\t\t\n\t<div id=\"map\"><\/div>\t\t\n<\/div>\t\t\t\n<\/div>\t\t\t\n <script>\n \/\/ Replace 'YOUR_MAPBOX_ACCESS_TOKEN' with your actual Mapbox access token\n mapboxgl.accessToken = 'pk.eyJ1IjoibmlnaHRtYXJlc3VyZiIsImEiOiJjazFjMnRjNHYydGN5M25wa2Y4cXkwcWNyIn0.EFUSe85Grl7ptScTOtJHoA';\n\n \/\/ Create a map centered on Hanoi\n const map = new mapboxgl.Map({\n container: 'map',\n style: 'mapbox:\/\/styles\/mapbox\/streets-v11',\n center: [108.3348, 15.8801],\n zoom: 7\n });\n\n \/\/ Add navigation control to the map\n map.addControl(new mapboxgl.NavigationControl());\n\n \/\/ Function to create a popup with the location name and remove the close button\n function createPopup(locationName, number) {\n return new mapboxgl.Popup({ offset: 25, closeButton: false })\n .setHTML(`<h3>${locationName}<\/h3>`);\n }\n\n \/\/ Add numbered markers for Ho Chi Minh city, Mekong delta, Can Tho, Cai Rang market, Ho Chi Minh city\nconst markers = [\n [108.2022, 16.0471, 'Da Nang'],\n [108.3420, 15.8801, 'Hoi An'],\n [108.3695, 15.8831, 'Thanh Dong Village'],\n [108.2022, 16.0471, 'Da Nang']\n];\n\n\n markers.forEach((markerData, index) => {\n const markerElement = document.createElement('div');\n markerElement.className = 'numbered-marker';\n markerElement.innerHTML = `<span class=\"marker-number\"><b>${index + 1}<\/b><\/span>`;\n \n const marker = new mapboxgl.Marker(markerElement)\n .setLngLat([markerData[0], markerData[1]])\n .addTo(map);\n\n marker.setPopup(createPopup(markerData[2], index + 1)).addTo(map);\n });\n\n const waypoints = markers.map(marker => ({\n coordinates: [marker[0], marker[1]],\n markerName: marker[2]\n }));\n\n \/\/ Use Mapbox Directions API to get route information\n const directionsRequest = 'https:\/\/api.mapbox.com\/directions\/v5\/mapbox\/driving\/' +\n waypoints.map(waypoint => `${waypoint.coordinates[0]},${waypoint.coordinates[1]}`).join(';') +\n `?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`;\n\n\n fetch(directionsRequest)\n .then(response => response.json())\n .then(data => {\n console.log(data); \/\/ Log the API response to the console\n \/\/ Draw the route on the map\n map.addSource('route', {\n 'type': 'geojson',\n 'data': {\n 'type': 'Feature',\n 'properties': {},\n 'geometry': data.routes[0].geometry\n }\n });\n\n map.addLayer({\n 'id': 'route',\n 'type': 'line',\n 'source': 'route',\n 'layout': {\n 'line-join': 'round',\n 'line-cap': 'round'\n },\n 'paint': {\n 'line-color': '#3887be',\n 'line-width': 5\n }\n });\n })\n .catch(error => console.error('Error fetching directions:', error));\n\n \/\/ Create the itinerary HTML\n const itineraryContainer = document.getElementById('itinerary-container');\n waypoints.forEach((waypoint, index) => {\n const itineraryItem = document.createElement('div');\n itineraryItem.className = 'itinerary-item';\n\n const itineraryNumber = document.createElement('div');\n itineraryNumber.className = 'numbered-marker';\n itineraryNumber.innerHTML= `<span class=\"marker-number\"><b>${index + 1}<\/b><\/span>`;\n itineraryNumber.style.marginLeft='1rem';\n itineraryNumber.style.marginTop='2rem';\n itineraryNumber.style.marginRight='2rem';\n const itineraryText = document.createElement('div');\n itineraryText.textContent = `${waypoint.markerName}`;\n\n itineraryItem.appendChild(itineraryNumber);\n itineraryItem.appendChild(itineraryText);\n itineraryContainer.appendChild(itineraryItem);\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Directions from Hanoi to Ho Chi Minh City Itinerary Expand all Day 1 : 03 Hours Enjoy an enchanting trip with a serene bamboo boat ride along the picturesque Co … <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2984,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3265","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/comments?post=3265"}],"version-history":[{"count":3,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3265\/revisions"}],"predecessor-version":[{"id":6672,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3265\/revisions\/6672"}],"up":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/2984"}],"wp:attachment":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/media?parent=3265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3265,"date":"2024-02-19T04:22:24","date_gmt":"2024-02-19T04:22:24","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=3265"},"modified":"2024-12-16T11:13:34","modified_gmt":"2024-12-16T11:13:34","slug":"vietnam-enchanting-bamboo-raft-dining-experience","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/vietnam-enchanting-bamboo-raft-dining-experience\/","title":{"rendered":"Vietnam UNFORGETTABLE MOMENTS"},"content":{"rendered":"\n\n\n\n \n \n Directions from Hanoi to Ho Chi Minh City<\/title>\n <script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.7.0\/mapbox-gl.js\"><\/script>\n <link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.7.0\/mapbox-gl.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/unpkg.com\/html2canvas@0.5.0-beta4\/dist\/html2canvas.min.js\"><\/script>\n\n <style>\n#wa {\n display: none !important;\n}\n\/* Set a specific height for the map container *\/\n#map {\n height: 100vh;\n width:70%;\n}\n#wrap{\ndisplay:flex;\njustify-content:center;\nalign-items:center;\n}\n\n.numbered-marker{\nwidth:0; height:0;}\n\n.numbered-marker span {\n display:flex;\n justify-content:center;\n align-items:center;\n box-sizing:border-box;\n width: 30px;\n height: 30px;\n color:#fff;\n background: #693;\n border:solid 2px;\n border-radius: 0 70% 70%;\n box-shadow:0 0 2px #000;\n cursor: pointer;\n transform-origin:0 0;\n transform: rotateZ(-135deg);\n}\n.numbered-marker b{\ntransform: rotateZ(135deg)}\n\n\n\/* Style for the itinerary *\/\n#itinerary-container {\n max-width: 400px;\n margin: 20px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n background-color: #f9f9f9;\n}\n\n.itinerary-item {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.itinerary-number {\n margin-right: 10px;\n font-weight: bold;\n}\n <\/style>\n<\/head>\n<body>\n\n\n \n<div id=\"wrap\">\t\t\t\n<div id=\"itinerary\">\n<div class=\"tab-content\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<div id=\"nb-2-configurations\" class=\"nb-2-configurations nb-configurations\" style=\"display: block;\">\n\t\t\t\t\t\t\t<div class=\"wte-itinerary-header-wrapper\">\n\t\t\t\t<div class=\"wp-travel-engine-itinerary-header\">\n\t\t\t\t\t<h2 class=\"wpte-itinerary-title\">Itinerary<\/h2>\n\t\t\t\t\t<div class=\"aib-button-toggle toggle-button expand-all-button\">\n\t\t\t\t\t\t<label for=\"itinerary-toggle-button\" class=\"aib-button-label\">Expand all<\/label>\n\t\t\t\t\t\t<input id=\"itinerary-toggle-button\" type=\"checkbox\" class=\"checkbox\" checked=\"\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<div class=\"post-data itinerary wte-trip-itinerary-v2\">\n\t\t\t\t<div class=\"itinerary-row active\">\n\t\t\t\t<div class=\"wte-itinerary-head-wrap\">\n\t\t\t\t\t<div class=\"title\">Day 1 : <\/div>\n\t\t\t\t\t<a class=\"accordion-tabs-toggle active\" href=\"javascript:void(0);\">\n\t\t\t\t\t\t<span class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"><\/span>\n\t\t\t\t\t\t<div class=\"itinerary-title\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t03 Hours\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t<style id=\"itinerary-content-show\"> .itinerary-content{ disply:block!important; } <\/style>\t\t\t\t<div class=\"itinerary-content show\" style=\"display:block;\">\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<p>Enjoy an enchanting trip with a serene bamboo boat ride along the picturesque Co Co River in Hoi An, capturing the stunning sunset views. The idyllic riverside setting near The Field restaurant sets the stage for a romantic dining experience. Enjoy culinary delight with a menu that includes fresh catches from the surrounding river and locally sourced vegetables, promising a unique and charming rural atmosphere during your stay.<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n<script>\n\t;(function() {\n\t\tvar toggleTab = function(row, force = null) {\n\t\t\tvar content = row.querySelector(\".itinerary-content\")\n\t\t\tvar toggler = row.querySelector(\".accordion-tabs-toggle\")\n\t\t\tvar condition = force === null ? ! toggler.classList.contains(\"active\") : force\n\t\t\tvar height = content.scrollHeight\n\t\t\tcontent.classList.toggle(\"active\", condition)\n\t\t\tif(condition) content.style.maxHeight = height + \"px\"\n\t\t\telse content.style.maxHeight = \"0px\"\n\t\t\ttoggler.classList.toggle(\"active\", condition)\n\t\t}\n\n\t\tvar handleToggleClick = function(row) {\n\t\t\treturn function(event) {\n\t\t\t\tvar target = event.target\n\t\t\t\tif(!!target.closest(\".wte-itinerary-head-wrap\")) {\n\t\t\t\t\ttoggleTab(row)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tvar setContentHeight = function(row) {\n\t\t\tvar content = row.querySelector(\".itinerary-content\")\n\t\t\tvar scrollHeight = content.scrollHeight\n\t\t\tif(content.classList.contains(\"active\"))\n\t\t\t\tcontent.style.maxHeight = (scrollHeight) + \"px\"\n\t\t\telse\tcontent.style.maxHeight = \"0px\"\n\t\t}\n\n\t\tvar wrapper = document.querySelector(\".wte-trip-itinerary-v2\")\n\t\tif ( wrapper ) {\n\t\t\tvar expandall = document.getElementById('itinerary-toggle-button')\n\t\t\tvar rows = wrapper.querySelectorAll('.itinerary-row')\n\t\t\tif(expandall) {\n\t\t\t\texpandall.addEventListener(\"change\", function() {\n\t\t\t\t\tif(rows) rows.forEach(row => {\n\t\t\t\t\t\ttoggleTab(row, this.checked)\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\t\t\tif ( rows ) {\n\t\t\t\trows.forEach(function(row) {\n\t\t\t\t\t\/\/ setContentHeight(row)\n\t\t\t\t\trow.addEventListener('click', handleToggleClick(row))\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t})();\n<\/script>\n\t\t\t<\/div><div id=\"nb-3-configurations\" class=\"nb-3-configurations nb-configurations\" style=\" display:none;\">\n\t\t\t\t\n\n<div class=\"post-data cost\">\n\t<h2 class=\"wpte-cost-tab-title\">Services<\/h2>\t<div class=\"content\">\n\t\t<h3>Included<\/h3>\t\t<ul id=\"include-result\">\n\t\t\t<li>–\tDinner at The Field restaurant.<\/li><li>–\tPrivate transport as mentioned in the program.<\/li><li>–\tLocal guides with a lot of experience.<\/li><li>–\tTickets and boat excursion as mentioned in the program. <\/li><li>–\tAll operating service charges.<\/li>\t\t<\/ul>\n\t\t\t<\/div>\n\t<div class=\"content\">\n\t\t<h3>Excluded<\/h3>\t\t<ul id=\"exclude-result\">\n\t\t\t<li>–\tOnline visa.<\/li><li>–\tDrinks and meals not specified in the itinerary.<\/li><li>–\tOther services not mentioned in the list of included services.<\/li>\t\t<\/ul>\n\t\t\t<\/div>\n<\/div>\n\n\t\t\t<\/div><div id=\"nb-6-configurations\" class=\"nb-6-configurations nb-configurations\" style=\"display: none;\">\n\t\t\t\t\n\n<div class=\"post-data\">\n\t\t<div class=\"content\">\n\t\t\t\t\t<div class=\"trip-map iframe\">\n\t\t\t\t<iframe loading=\"lazy\" src=\"https:\/\/epictripasia.com\/maps\/vietnam-enchanting-bamboo-raft-dining-experience\/\" width=\"600\" height=\"700\" style=\"border:0\" allowfullscreen=\"\"><\/iframe>\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n\t\t\t<\/div><div id=\"nb-7-configurations\" class=\"nb-7-configurations nb-configurations\" style=\" display:none;\">\n\t\t\t\t\n\n<div class=\"post-data highlights\">\n<h2 class=\"wpte-7-title\">Highlight<\/h2>\t\n\t\t\t<ul>\n<li>Visit: Co Co river \u2013 The Field restaurant<\/li>\n<li>Bamboo boat ride<\/li>\n<li>Sunset views<\/li>\n<li>Romantic landscape<\/li>\n<\/ul>\n\t\t\n\n<\/div>\n\t\t\t<\/div><\/div>\n<\/div>\t\t\t\n<div class=\"wrapper-map\">\t\t\t\n\t<div id=\"itinerary-container\"><\/div>\t\t\n\t<div id=\"map\"><\/div>\t\t\n<\/div>\t\t\t\n<\/div>\t\t\t\n <script>\n \/\/ Replace 'YOUR_MAPBOX_ACCESS_TOKEN' with your actual Mapbox access token\n mapboxgl.accessToken = 'pk.eyJ1IjoibmlnaHRtYXJlc3VyZiIsImEiOiJjazFjMnRjNHYydGN5M25wa2Y4cXkwcWNyIn0.EFUSe85Grl7ptScTOtJHoA';\n\n \/\/ Create a map centered on Hanoi\n const map = new mapboxgl.Map({\n container: 'map',\n style: 'mapbox:\/\/styles\/mapbox\/streets-v11',\n center: [108.3348, 15.8801],\n zoom: 7\n });\n\n \/\/ Add navigation control to the map\n map.addControl(new mapboxgl.NavigationControl());\n\n \/\/ Function to create a popup with the location name and remove the close button\n function createPopup(locationName, number) {\n return new mapboxgl.Popup({ offset: 25, closeButton: false })\n .setHTML(`<h3>${locationName}<\/h3>`);\n }\n\n \/\/ Add numbered markers for Ho Chi Minh city, Mekong delta, Can Tho, Cai Rang market, Ho Chi Minh city\nconst markers = [\n [108.2022, 16.0471, 'Da Nang'],\n [108.3420, 15.8801, 'Hoi An'],\n [108.3695, 15.8831, 'Thanh Dong Village'],\n [108.2022, 16.0471, 'Da Nang']\n];\n\n\n markers.forEach((markerData, index) => {\n const markerElement = document.createElement('div');\n markerElement.className = 'numbered-marker';\n markerElement.innerHTML = `<span class=\"marker-number\"><b>${index + 1}<\/b><\/span>`;\n \n const marker = new mapboxgl.Marker(markerElement)\n .setLngLat([markerData[0], markerData[1]])\n .addTo(map);\n\n marker.setPopup(createPopup(markerData[2], index + 1)).addTo(map);\n });\n\n const waypoints = markers.map(marker => ({\n coordinates: [marker[0], marker[1]],\n markerName: marker[2]\n }));\n\n \/\/ Use Mapbox Directions API to get route information\n const directionsRequest = 'https:\/\/api.mapbox.com\/directions\/v5\/mapbox\/driving\/' +\n waypoints.map(waypoint => `${waypoint.coordinates[0]},${waypoint.coordinates[1]}`).join(';') +\n `?steps=true&geometries=geojson&access_token=${mapboxgl.accessToken}`;\n\n\n fetch(directionsRequest)\n .then(response => response.json())\n .then(data => {\n console.log(data); \/\/ Log the API response to the console\n \/\/ Draw the route on the map\n map.addSource('route', {\n 'type': 'geojson',\n 'data': {\n 'type': 'Feature',\n 'properties': {},\n 'geometry': data.routes[0].geometry\n }\n });\n\n map.addLayer({\n 'id': 'route',\n 'type': 'line',\n 'source': 'route',\n 'layout': {\n 'line-join': 'round',\n 'line-cap': 'round'\n },\n 'paint': {\n 'line-color': '#3887be',\n 'line-width': 5\n }\n });\n })\n .catch(error => console.error('Error fetching directions:', error));\n\n \/\/ Create the itinerary HTML\n const itineraryContainer = document.getElementById('itinerary-container');\n waypoints.forEach((waypoint, index) => {\n const itineraryItem = document.createElement('div');\n itineraryItem.className = 'itinerary-item';\n\n const itineraryNumber = document.createElement('div');\n itineraryNumber.className = 'numbered-marker';\n itineraryNumber.innerHTML= `<span class=\"marker-number\"><b>${index + 1}<\/b><\/span>`;\n itineraryNumber.style.marginLeft='1rem';\n itineraryNumber.style.marginTop='2rem';\n itineraryNumber.style.marginRight='2rem';\n const itineraryText = document.createElement('div');\n itineraryText.textContent = `${waypoint.markerName}`;\n\n itineraryItem.appendChild(itineraryNumber);\n itineraryItem.appendChild(itineraryText);\n itineraryContainer.appendChild(itineraryItem);\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Directions from Hanoi to Ho Chi Minh City Itinerary Expand all Day 1 : 03 Hours Enjoy an enchanting trip with a serene bamboo boat ride along the picturesque Co … <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2984,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-3265","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/comments?post=3265"}],"version-history":[{"count":3,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3265\/revisions"}],"predecessor-version":[{"id":6672,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3265\/revisions\/6672"}],"up":[{"embeddable":true,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/2984"}],"wp:attachment":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/media?parent=3265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}