{"id":8421,"date":"2025-09-28T18:00:23","date_gmt":"2025-09-28T18:00:23","guid":{"rendered":"https:\/\/mariposastour.com\/de-donde-a-donde\/"},"modified":"2025-10-28T12:42:31","modified_gmt":"2025-10-28T12:42:31","slug":"de-donde-a-donde","status":"publish","type":"page","link":"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/","title":{"rendered":"De d\u00f3nde a d\u00f3nde"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8421\" class=\"elementor elementor-8421 elementor-7543\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-49b2337 e-flex e-con-boxed e-con e-parent\" data-id=\"49b2337\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe10504 elementor-widget elementor-widget-html\" data-id=\"fe10504\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  #map { height: 520px; width: 100%; }\n  .gm-controls { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }\n  .gm-controls input, .gm-controls button {\n    padding:8px; border:1px solid #ccc; border-radius:6px; font-size:14px;\n  }\n  #summary { margin-top:10px; font-weight:600; }\n  .map-hud {\n    background:#fff; border:1px solid #ddd; border-radius:8px; padding:8px 12px;\n    font:600 13px\/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n    box-shadow:0 2px 10px rgba(0,0,0,.1); margin:10px;\n    white-space:nowrap;\n  }\n<\/style>\n\n<div class=\"gm-controls\">\n  <input id=\"origin\" type=\"text\" placeholder=\"Start location (e.g., Besiktas)\">\n  <input id=\"destination\" type=\"text\" placeholder=\"Destination (e.g., Kadikoy)\">\n  <button id=\"route-btn\" type=\"button\">Get driving directions<\/button>\n  <button id=\"clear-btn\" type=\"button\">Clear<\/button>\n<\/div>\n\n<div id=\"map\"><\/div>\n<div id=\"summary\"><\/div>\n\n<script>\n  let map, directionsService, directionsRenderer, originAutocomplete, destAutocomplete;\n  let hudDiv, destMarker, destInfo;\n\n  function initMap() {\n    map = new google.maps.Map(document.getElementById('map'), {\n      center: {lat: 41.0082, lng: 28.9784}, \/\/ Istanbul\n      zoom: 12,\n      mapTypeControl: false\n    });\n\n    directionsService = new google.maps.DirectionsService();\n    directionsRenderer = new google.maps.DirectionsRenderer({\n      draggable: true,\n      map: map\n    });\n\n    \/\/ Autocomplete\n    originAutocomplete = new google.maps.places.Autocomplete(\n      document.getElementById('origin'), { fields: ['place_id','geometry','name'] }\n    );\n    destAutocomplete = new google.maps.places.Autocomplete(\n      document.getElementById('destination'), { fields: ['place_id','geometry','name'] }\n    );\n\n    \/\/ HUD (distance \u2022 ETA \u2022 arrival) as a map control (top-right)\n    hudDiv = document.createElement('div');\n    hudDiv.className = 'map-hud';\n    hudDiv.textContent = 'Distance: \u2014 \u2022 ETA: \u2014 \u2022 Arrival: \u2014';\n    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(hudDiv);\n\n    \/\/ Recompute summary when route is dragged\n    google.maps.event.addListener(directionsRenderer, 'directions_changed', () => {\n      const dir = directionsRenderer.getDirections();\n      if (dir) updateSummary(dir);\n    });\n\n    document.getElementById('route-btn').addEventListener('click', calcRoute);\n    document.getElementById('clear-btn').addEventListener('click', clearRoute);\n  }\n\n  function calcRoute() {\n    const origin = document.getElementById('origin').value.trim();\n    const destination = document.getElementById('destination').value.trim();\n    if (!origin || !destination) {\n      alert('Please enter both start and destination.');\n      return;\n    }\n\n    const request = {\n      origin,\n      destination,\n      travelMode: google.maps.TravelMode.DRIVING,\n      provideRouteAlternatives: false\n    };\n\n    directionsService.route(request, (result, status) => {\n      if (status === 'OK') {\n        directionsRenderer.setDirections(result);\n        updateSummary(result);\n        placeDestinationMarker(result);\n      } else if (status === 'ZERO_RESULTS') {\n        setSummaryTexts('\u2014', '\u2014', '\u2014', 'No driving route found.');\n      } else {\n        setSummaryTexts('\u2014', '\u2014', '\u2014', 'Error: ' + status);\n      }\n    });\n  }\n\n  function updateSummary(directionsResult) {\n    let totalMeters = 0;\n    let totalSeconds = 0;\n    const route = directionsResult.routes[0];\n    route.legs.forEach(leg => {\n      totalMeters += leg.distance?.value || 0;\n      totalSeconds += leg.duration?.value || 0;\n    });\n\n    const km = (totalMeters \/ 1000).toFixed(1);\n    const hours = Math.floor(totalSeconds \/ 3600);\n    const minutes = Math.round((totalSeconds % 3600) \/ 60);\n    const timeStr = hours > 0 ? `${hours} h ${minutes} min` : `${minutes} min`;\n\n    const arrivalDate = new Date(Date.now() + totalSeconds * 1000);\n    const arrivalStr = arrivalDate.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});\n\n    setSummaryTexts(km, timeStr, arrivalStr);\n    \/\/ If there is an open destination info window, refresh its content\n    if (destInfo) {\n      destInfo.setContent(infoHtml(km, timeStr, arrivalStr));\n    }\n  }\n\n  function setSummaryTexts(km, timeStr, arrivalStr, overrideMsg) {\n    const text = overrideMsg ? overrideMsg : `Distance: ${km} km \u2022 ETA: ${timeStr} \u2022 Arrival: ${arrivalStr}`;\n    document.getElementById('summary').textContent = text;\n    hudDiv.textContent = text;\n  }\n\n  function placeDestinationMarker(directionsResult) {\n    \/\/ Clear previous\n    if (destMarker) { destMarker.setMap(null); destMarker = null; }\n    if (destInfo) { destInfo.close(); destInfo = null; }\n\n    const route = directionsResult.routes[0];\n    const lastLeg = route.legs[route.legs.length - 1];\n\n    destMarker = new google.maps.Marker({\n      map,\n      position: lastLeg.end_location,\n      title: lastLeg.end_address\n    });\n\n    \/\/ Build info text using current summary (already computed)\n    const currentTxt = document.getElementById('summary').textContent;\n    \/\/ Extract parts if available, else recompute quickly:\n    let km='\u2014', eta='\u2014', arr='\u2014';\n    const m = currentTxt.match(\/Distance:\\s([^\u2022]+)\u2022\\sETA:\\s([^\u2022]+)\u2022\\sArrival:\\s(.+)\/);\n    if (m) { km = m[1].trim(); eta = m[2].trim(); arr = m[3].trim(); }\n\n    destInfo = new google.maps.InfoWindow({\n      content: infoHtml(km, eta, arr)\n    });\n    destInfo.open(map, destMarker);\n\n    destMarker.addListener('click', () => {\n      destInfo.open(map, destMarker);\n    });\n  }\n\n  function infoHtml(km, eta, arrival) {\n    return `\n      <div style=\"font:600 13px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\">\n        <div>Distance: ${km}<\/div>\n        <div>ETA: ${eta}<\/div>\n        <div>Arrival: ${arrival}<\/div>\n      <\/div>`;\n  }\n\n  function clearRoute() {\n    directionsRenderer.setDirections({routes: []});\n    document.getElementById('summary').textContent = '';\n    hudDiv.textContent = 'Distance: \u2014 \u2022 ETA: \u2014 \u2022 Arrival: \u2014';\n    document.getElementById('origin').value = '';\n    document.getElementById('destination').value = '';\n    if (destMarker) { destMarker.setMap(null); destMarker = null; }\n    if (destInfo) { destInfo.close(); destInfo = null; }\n  }\n<\/script>\n\n<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyAON3D98Iba_p1M_8XJQYrlNfoXZiuUhu8&language=en&region=US&libraries=places&callback=initMap\" async defer><\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Get driving directions Clear<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8421","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>De d\u00f3nde a d\u00f3nde - Mariposas Tour<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"De d\u00f3nde a d\u00f3nde - Mariposas Tour\" \/>\n<meta property=\"og:description\" content=\"Get driving directions Clear\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/\" \/>\n<meta property=\"og:site_name\" content=\"Mariposas Tour\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-28T12:42:31+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/\",\"url\":\"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/\",\"name\":\"De d\u00f3nde a d\u00f3nde - Mariposas Tour\",\"isPartOf\":{\"@id\":\"https:\/\/mariposastour.com\/es\/#website\"},\"datePublished\":\"2025-09-28T18:00:23+00:00\",\"dateModified\":\"2025-10-28T12:42:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mariposastour.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"De d\u00f3nde a d\u00f3nde\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mariposastour.com\/es\/#website\",\"url\":\"https:\/\/mariposastour.com\/es\/\",\"name\":\"Mariposas Tour\",\"description\":\"Lets Colors the Memories\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mariposastour.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"De d\u00f3nde a d\u00f3nde - Mariposas Tour","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/","og_locale":"es_ES","og_type":"article","og_title":"De d\u00f3nde a d\u00f3nde - Mariposas Tour","og_description":"Get driving directions Clear","og_url":"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/","og_site_name":"Mariposas Tour","article_modified_time":"2025-10-28T12:42:31+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/","url":"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/","name":"De d\u00f3nde a d\u00f3nde - Mariposas Tour","isPartOf":{"@id":"https:\/\/mariposastour.com\/es\/#website"},"datePublished":"2025-09-28T18:00:23+00:00","dateModified":"2025-10-28T12:42:31+00:00","breadcrumb":{"@id":"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mariposastour.com\/es\/de-donde-a-donde\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mariposastour.com\/es\/de-donde-a-donde\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mariposastour.com\/es\/"},{"@type":"ListItem","position":2,"name":"De d\u00f3nde a d\u00f3nde"}]},{"@type":"WebSite","@id":"https:\/\/mariposastour.com\/es\/#website","url":"https:\/\/mariposastour.com\/es\/","name":"Mariposas Tour","description":"Lets Colors the Memories","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mariposastour.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"}]}},"_links":{"self":[{"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/pages\/8421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/comments?post=8421"}],"version-history":[{"count":1,"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/pages\/8421\/revisions"}],"predecessor-version":[{"id":8422,"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/pages\/8421\/revisions\/8422"}],"wp:attachment":[{"href":"https:\/\/mariposastour.com\/es\/wp-json\/wp\/v2\/media?parent=8421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}