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:normal;\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 <div id=\"nb-2-configurations\" class=\"nb-2-configurations nb-configurations\" style=\"display: block;\">\n <div class=\"wte-itinerary-header-wrapper\">\n <div class=\"wp-travel-engine-itinerary-header\">\n <h2 class=\"wpte-itinerary-title\">Itinerary<\/h2>\n <div class=\"aib-button-toggle toggle-button expand-all-button\">\n <label for=\"itinerary-toggle-button\" class=\"aib-button-label\">Expand all<\/label>\n <input id=\"itinerary-toggle-button\" type=\"checkbox\" class=\"checkbox\" checked=\"\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"post-data itinerary wte-trip-itinerary-v2\">\n <div class=\"itinerary-row active\">\n <div class=\"wte-itinerary-head-wrap\">\n <div class=\"title\">Day 1 : <\/div>\n <a class=\"accordion-tabs-toggle active\" href=\"javascript:void(0);\">\n <span class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"><\/span>\n <div class=\"itinerary-title\">\n <span> HO CHI MINH CITY \u2013 MEKONG DELTA \u2013 CAN THO <\/span>\n <\/div>\n <\/a>\n <\/div>\n <style id=\"itinerary-content-show\">\n .itinerary-content {\n disply: block !important;\n }\n <\/style>\n <div class=\"itinerary-content show\" style=\"display:block;\">\n <div class=\"content\">\n <p>Embark on a journey of three hours to the Ben Tre province in the Mekong Delta, renowned for its tropical fruit orchards and traditional coconut craftsmanship. Explore a pineapple and coconut orchard, witness the making of coconut candies in a local workshop, and indulge in tropical fruits from the orchard. Experience a tuk-tuk ride to a small mat-weaving workshop run by a local family, engaging with them to learn traditional techniques passed down through centuries. Along the way, immerse yourself in the serene ambiance of Mekong villages, shaded by narrow streets, and appreciate the tranquility of the surroundings. Then, transfer to Can Tho, the Mekong Delta’s key city, renowned for its intricate canal network. <br> Accommodation in Can Tho. <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"itinerary-row active\">\n <div class=\"wte-itinerary-head-wrap\">\n <div class=\"title\">Day 2 : <\/div>\n <a class=\"accordion-tabs-toggle active\" href=\"javascript:void(0);\">\n <span class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"><\/span>\n <div class=\"itinerary-title\">\n <span> CAN THO: CAI RANG FLOATING MARKET \u2013 HO CHI MINH CITY <\/span>\n <\/div>\n <\/a>\n <\/div>\n <style id=\"itinerary-content-show\">\n .itinerary-content {\n disply: block !important;\n }\n <\/style>\n <div class=\"itinerary-content show\" style=\"display:block;\">\n <div class=\"content\">\n <p>Embark on an early morning boat tour to the renowned Cai Rang floating market, a bustling hub in the Southwest celebrated for its wholesale trade of fruits and agricultural products. Witness the lively spectacle of hundreds of boats, ships, and canoes laden with a diverse array of goods, including fruits, vegetables, and the region’s exceptional rice. Experience the unique presentation as vendors hang samples on bamboo poles, known as Cay Tre, showcasing their offerings. End of the tour with a visit to the local market, offering insights into the daily life of the Mekong Delta’s residents. After that, transfer back to Saigon. <br> Accommodation in Saigon. <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n ;\n (function() {\n var toggleTab = function(row, force = null) {\n var content = row.querySelector(\".itinerary-content\")\n var toggler = row.querySelector(\".accordion-tabs-toggle\")\n var condition = force === null ? !toggler.classList.contains(\"active\") : force\n var height = content.scrollHeight\n content.classList.toggle(\"active\", condition)\n if (condition) content.style.maxHeight = height + \"px\"\n else content.style.maxHeight = \"0px\"\n toggler.classList.toggle(\"active\", condition)\n }\n var handleToggleClick = function(row) {\n return function(event) {\n var target = event.target\n if (!!target.closest(\".wte-itinerary-head-wrap\")) {\n toggleTab(row)\n }\n }\n }\n var setContentHeight = function(row) {\n var content = row.querySelector(\".itinerary-content\")\n var scrollHeight = content.scrollHeight\n if (content.classList.contains(\"active\")) content.style.maxHeight = (scrollHeight) + \"px\"\n else content.style.maxHeight = \"0px\"\n }\n var wrapper = document.querySelector(\".wte-trip-itinerary-v2\")\n if (wrapper) {\n var expandall = document.getElementById('itinerary-toggle-button')\n var rows = wrapper.querySelectorAll('.itinerary-row')\n if (expandall) {\n expandall.addEventListener(\"change\", function() {\n if (rows) rows.forEach(row => {\n toggleTab(row, this.checked)\n })\n })\n }\n if (rows) {\n rows.forEach(function(row) {\n \/\/ setContentHeight(row)\n row.addEventListener('click', handleToggleClick(row))\n });\n }\n }\n })();\n <\/script>\n <\/div>\n<\/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: 4\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 [106.7009, 10.7769, 'Ho Chi Minh City'], \/\/ Ho Chi Minh City\n [106.3758, 10.2415, 'Ben Tre'], \/\/ Ben Tre\n [105.7469, 10.0452, 'Can Tho'], \/\/ Can Tho\n [105.7854, 10.0099, 'Cai Rang'], \/\/ Cai Rang\n [106.7009, 10.7769, 'Ho Chi Minh City'] \/\/ Back to Ho Chi Minh City\n];\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 : HO CHI MINH CITY \u2013 MEKONG DELTA \u2013 CAN THO Embark on a journey of three … <\/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-3262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3262","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=3262"}],"version-history":[{"count":4,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3262\/revisions"}],"predecessor-version":[{"id":6658,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3262\/revisions\/6658"}],"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=3262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3262,"date":"2024-02-19T04:19:59","date_gmt":"2024-02-19T04:19:59","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=3262"},"modified":"2024-12-16T10:50:50","modified_gmt":"2024-12-16T10:50:50","slug":"vietnam-mekong-rhythms-exploring-the-vibrant-river-life","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/vietnam-mekong-rhythms-exploring-the-vibrant-river-life\/","title":{"rendered":"Vietnam MEKONG RHYTHMS: EXPLORING THE VIBRANT RIVER LIFE"},"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:normal;\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 <div id=\"nb-2-configurations\" class=\"nb-2-configurations nb-configurations\" style=\"display: block;\">\n <div class=\"wte-itinerary-header-wrapper\">\n <div class=\"wp-travel-engine-itinerary-header\">\n <h2 class=\"wpte-itinerary-title\">Itinerary<\/h2>\n <div class=\"aib-button-toggle toggle-button expand-all-button\">\n <label for=\"itinerary-toggle-button\" class=\"aib-button-label\">Expand all<\/label>\n <input id=\"itinerary-toggle-button\" type=\"checkbox\" class=\"checkbox\" checked=\"\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"post-data itinerary wte-trip-itinerary-v2\">\n <div class=\"itinerary-row active\">\n <div class=\"wte-itinerary-head-wrap\">\n <div class=\"title\">Day 1 : <\/div>\n <a class=\"accordion-tabs-toggle active\" href=\"javascript:void(0);\">\n <span class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"><\/span>\n <div class=\"itinerary-title\">\n <span> HO CHI MINH CITY \u2013 MEKONG DELTA \u2013 CAN THO <\/span>\n <\/div>\n <\/a>\n <\/div>\n <style id=\"itinerary-content-show\">\n .itinerary-content {\n disply: block !important;\n }\n <\/style>\n <div class=\"itinerary-content show\" style=\"display:block;\">\n <div class=\"content\">\n <p>Embark on a journey of three hours to the Ben Tre province in the Mekong Delta, renowned for its tropical fruit orchards and traditional coconut craftsmanship. Explore a pineapple and coconut orchard, witness the making of coconut candies in a local workshop, and indulge in tropical fruits from the orchard. Experience a tuk-tuk ride to a small mat-weaving workshop run by a local family, engaging with them to learn traditional techniques passed down through centuries. Along the way, immerse yourself in the serene ambiance of Mekong villages, shaded by narrow streets, and appreciate the tranquility of the surroundings. Then, transfer to Can Tho, the Mekong Delta’s key city, renowned for its intricate canal network. <br> Accommodation in Can Tho. <\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"itinerary-row active\">\n <div class=\"wte-itinerary-head-wrap\">\n <div class=\"title\">Day 2 : <\/div>\n <a class=\"accordion-tabs-toggle active\" href=\"javascript:void(0);\">\n <span class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"><\/span>\n <div class=\"itinerary-title\">\n <span> CAN THO: CAI RANG FLOATING MARKET \u2013 HO CHI MINH CITY <\/span>\n <\/div>\n <\/a>\n <\/div>\n <style id=\"itinerary-content-show\">\n .itinerary-content {\n disply: block !important;\n }\n <\/style>\n <div class=\"itinerary-content show\" style=\"display:block;\">\n <div class=\"content\">\n <p>Embark on an early morning boat tour to the renowned Cai Rang floating market, a bustling hub in the Southwest celebrated for its wholesale trade of fruits and agricultural products. Witness the lively spectacle of hundreds of boats, ships, and canoes laden with a diverse array of goods, including fruits, vegetables, and the region’s exceptional rice. Experience the unique presentation as vendors hang samples on bamboo poles, known as Cay Tre, showcasing their offerings. End of the tour with a visit to the local market, offering insights into the daily life of the Mekong Delta’s residents. After that, transfer back to Saigon. <br> Accommodation in Saigon. <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n ;\n (function() {\n var toggleTab = function(row, force = null) {\n var content = row.querySelector(\".itinerary-content\")\n var toggler = row.querySelector(\".accordion-tabs-toggle\")\n var condition = force === null ? !toggler.classList.contains(\"active\") : force\n var height = content.scrollHeight\n content.classList.toggle(\"active\", condition)\n if (condition) content.style.maxHeight = height + \"px\"\n else content.style.maxHeight = \"0px\"\n toggler.classList.toggle(\"active\", condition)\n }\n var handleToggleClick = function(row) {\n return function(event) {\n var target = event.target\n if (!!target.closest(\".wte-itinerary-head-wrap\")) {\n toggleTab(row)\n }\n }\n }\n var setContentHeight = function(row) {\n var content = row.querySelector(\".itinerary-content\")\n var scrollHeight = content.scrollHeight\n if (content.classList.contains(\"active\")) content.style.maxHeight = (scrollHeight) + \"px\"\n else content.style.maxHeight = \"0px\"\n }\n var wrapper = document.querySelector(\".wte-trip-itinerary-v2\")\n if (wrapper) {\n var expandall = document.getElementById('itinerary-toggle-button')\n var rows = wrapper.querySelectorAll('.itinerary-row')\n if (expandall) {\n expandall.addEventListener(\"change\", function() {\n if (rows) rows.forEach(row => {\n toggleTab(row, this.checked)\n })\n })\n }\n if (rows) {\n rows.forEach(function(row) {\n \/\/ setContentHeight(row)\n row.addEventListener('click', handleToggleClick(row))\n });\n }\n }\n })();\n <\/script>\n <\/div>\n<\/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: 4\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 [106.7009, 10.7769, 'Ho Chi Minh City'], \/\/ Ho Chi Minh City\n [106.3758, 10.2415, 'Ben Tre'], \/\/ Ben Tre\n [105.7469, 10.0452, 'Can Tho'], \/\/ Can Tho\n [105.7854, 10.0099, 'Cai Rang'], \/\/ Cai Rang\n [106.7009, 10.7769, 'Ho Chi Minh City'] \/\/ Back to Ho Chi Minh City\n];\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 : HO CHI MINH CITY \u2013 MEKONG DELTA \u2013 CAN THO Embark on a journey of three … <\/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-3262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3262","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=3262"}],"version-history":[{"count":4,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3262\/revisions"}],"predecessor-version":[{"id":6658,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3262\/revisions\/6658"}],"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=3262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}