{"id":3520,"date":"2024-03-01T08:44:27","date_gmt":"2024-03-01T08:44:27","guid":{"rendered":"https:\/\/epictripasia.com\/?page_id=3520"},"modified":"2024-03-03T03:26:42","modified_gmt":"2024-03-03T03:26:42","slug":"the-golden-journey-across-japan-map","status":"publish","type":"page","link":"https:\/\/epictripasia.com\/en\/maps\/the-golden-journey-across-japan-map\/","title":{"rendered":"THE GOLDEN JOURNEY ACROSS JAPAN MAP"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>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    <!-- Map container -->\n<div id=\"wrap\">\n  <div id=\"itinerary\">\n    <div class=\"tab-content\">\n      <div\n        id=\"nb-2-configurations\"\n        class=\"nb-2-configurations nb-configurations\"\n        style=\"display: block\"\n      >\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\"\n                >Expand all<\/label\n              >\n              <input\n                id=\"itinerary-toggle-button\"\n                type=\"checkbox\"\n                class=\"checkbox\"\n                checked=\"\"\n              \/>\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\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> ARRIVAL IN TOKYO <\/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>\n                  Upon your arrival at the airport, you will be welcomed by a\n                  driver and transferred directly to the hotel for check-in.\n                  Simply enjoy free time at the hotel.<br \/>\n                  Overnight in Tokyo.\n                <\/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\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> TOKYO <\/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>\n                  Discover Tokyo&#8217;s vibrant cultural tapestry with your guide.\n                  Begin at Asakusa Kannon Temple, home to Japan&#8217;s largest paper\n                  lantern. Explore Nakamise Market, a centuries-old shopping\n                  street. Dive into the Edo Tokyo Museum&#8217;s immersive exhibits\n                  showcasing the Edo period. Experience the tranquility of Meiji\n                  Shrine, dedicated to Emperor Meiji. Wander through Harajuku&#8217;s\n                  Takeshita district, known for eccentric fashions and unique\n                  shops. Whether shopping or people-watching, Harajuku offers a\n                  delightful mix of styles. Immerse yourself in Tokyo&#8217;s diverse\n                  attractions and historical charm.<br \/>\n                  Overnight in Tokyo.\n                <\/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 3 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> TOKYO \u2013 HAKONE <\/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>\n                  Travel with your guide from Tokyo Shinjuku to Hakone aboard\n                  the renowned Romancecar Limited Express. Revel in\n                  opportunities to glimpse Mt. Fuji in Hakone, weather\n                  permitting. Cruise on Lake Ashi, marveling at the natural\n                  beauty of Hakone. Take a 20-minute ropeway ride from Togendai\n                  to Owakudani, enjoying panoramic views of Mt. Fuji. Explore\n                  Owakudani&#8217;s active volcanic zone, experiencing hot springs and\n                  sulfurous fumes. End your day at a traditional Ryokan,\n                  savoring a Kaiseki dinner and indulging in an Onsen hot spring\n                  bath. Immerse yourself in Hakone&#8217;s captivating landscapes and\n                  cultural traditions.<br \/>\n                  Overnight in Hakone.\n                <\/p>\n                <p>\n                  Note: We will courier your big baggage from Tokyo to your\n                  hotel in Kyoto. Please pack your essentials in a small bag to\n                  carry with you for a one-night stay in Hakone.\n                <\/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 4 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> HAKONE \u2013 KYOTO <\/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>\n                  Embark on a self-guided journey from Hakone to Odawara station\n                  by shuttle bus, followed by a bullet train ride to enchanting\n                  Kyoto. Your bullet train tickets and directions will be\n                  seamlessly arranged. Upon arrival at Kyoto station, relish\n                  free leisure time to explore. If you prefer, you may also\n                  enhance your experience with optional activities like\n                  discovering the art of Kimono participating in a Green Tea\n                  Ceremony, trying your hand at Origami, delving into\n                  Calligraphy, or immersing yourself in the art of Ikebana.\n                  Customize your Kyoto adventure with these enriching\n                  options.<br \/>\n                  Overnight in Kyoto.\n                <\/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 5 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> KYOTO <\/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>\n                  Meet your guide in the hotel lobby and enjoy a captivating\n                  private tour in Kyoto, the ancient capital of Japan. Explore\n                  the renowned Golden Pavilion, adorned with 18 carat gold leaf,\n                  originally built in 1397 by Shogun Ashikaga Yoshimitsu. Delve\n                  into the architectural wonders of Nijo Castle, a UNESCO world\n                  heritage site from the feudal era. Discover the iconic\n                  Kiyomizu-dera temple, famous for its expansive wooden stage\n                  overlooking picturesque natural landscapes. End your day in\n                  the enchanting Gion Geisha District, where teahouses line the\n                  streets. With the flexibility of a private tour, customize\n                  your experience by adding activities like Zen meditation with\n                  local monks or a Kaiseki dinner accompanied by a Geisha\n                  performance. Tailor your Kyoto adventure to your\n                  preferences.<br \/>\n                  Overnight in Kyoto.\n                <\/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 6 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> KYOTO \u2013 NARA \u2013 KYOTO <\/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>\n                  Start the day with a cultural journey with your guide as you\n                  explore the Fushimi Inari Shrine, renowned for its mesmerizing\n                  trail of torii gates. Navigate local trains to reach Nara,\n                  where you&#8217;ll visit the serene Isuien Garden, blending\n                  seamlessly with borrowed scenery. Discover the iconic Todaiji\n                  Temple, a Nara landmark, and engage with the charming wild\n                  deer at Nara Deer Park. Enhance your cultural experience by\n                  adding a Bamboo Chasen (tea whisk) making activity, delving\n                  deeper into the traditions of Japanese culture and crafts.\n                  Immerse yourself in the beauty and history of these\n                  significant landmarks.<br \/>\n                  Overnight in Kyoto.\n                <\/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 7 :<\/div>\n              <a\n                class=\"accordion-tabs-toggle active\"\n                href=\"javascript:void(0);\"\n              >\n                <span\n                  class=\"dashicons dashicons-arrow-down custom-toggle-tabs rotator open\"\n                ><\/span>\n                <div class=\"itinerary-title\">\n                  <span> KYOTO \u2013 DEPARTURE <\/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>\n                  Free at leisure until the indicated time, transfer to Osaka\n                  Kansai Airport for your departure flight.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        <script>\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 =\n                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\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\n            var setContentHeight = function (row) {\n              var content = row.querySelector(\".itinerary-content\");\n              var scrollHeight = content.scrollHeight;\n              if (content.classList.contains(\"active\"))\n                content.style.maxHeight = scrollHeight + \"px\";\n              else content.style.maxHeight = \"0px\";\n            };\n\n            var wrapper = document.querySelector(\".wte-trip-itinerary-v2\");\n            if (wrapper) {\n              var expandall = document.getElementById(\n                \"itinerary-toggle-button\"\n              );\n              var rows = wrapper.querySelectorAll(\".itinerary-row\");\n              if (expandall) {\n                expandall.addEventListener(\"change\", function () {\n                  if (rows)\n                    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>\n  <div class=\"wrapper-map\">\n    <div id=\"itinerary-container\"><\/div>\n    <div id=\"map\"><\/div>\n  <\/div>\n<\/div>\n\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: [139.6917, 35.6895],\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 Dong Hoi, Phong Nha, Hue, \nconst markers = [\n    [139.6917, 35.6895, 'Tokyo'],        \/\/ Tokyo\n    [139.0456, 35.2323, 'Hakone'],       \/\/ Hakone\n    [135.7681, 35.0116, 'Kyoto'],        \/\/ Kyoto\n    [135.8327, 34.6851, 'Nara'],         \/\/ Nara\n    [135.7681, 35.0116, 'Kyoto']         \/\/ Kyoto (again)\n];\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 : ARRIVAL IN TOKYO Upon your arrival at the airport, you will be welcomed by a driver &hellip; <\/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-3520","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3520","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=3520"}],"version-history":[{"count":3,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3520\/revisions"}],"predecessor-version":[{"id":3653,"href":"https:\/\/epictripasia.com\/en\/wp-json\/wp\/v2\/pages\/3520\/revisions\/3653"}],"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=3520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}