{"id":9738,"date":"2025-09-28T18:00:23","date_gmt":"2025-09-28T18:00:23","guid":{"rendered":"https:\/\/mariposastour.com\/mula-sa-kung-saan-papunta\/"},"modified":"2025-10-30T08:11:00","modified_gmt":"2025-10-30T08:11:00","slug":"mula-sa-kung-saan-papunta","status":"publish","type":"page","link":"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/","title":{"rendered":"Mula sa kung saan papunta"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9738\" class=\"elementor elementor-9738 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>\r\n  #map { height: 520px; width: 100%; }\r\n  .gm-controls { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }\r\n  .gm-controls input, .gm-controls button {\r\n    padding:8px; border:1px solid #ccc; border-radius:6px; font-size:14px;\r\n  }\r\n  #summary { margin-top:10px; font-weight:600; }\r\n  .map-hud {\r\n    background:#fff; border:1px solid #ddd; border-radius:8px; padding:8px 12px;\r\n    font:600 13px\/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n    box-shadow:0 2px 10px rgba(0,0,0,.1); margin:10px;\r\n    white-space:nowrap;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"gm-controls\">\r\n  <input id=\"origin\" type=\"text\" placeholder=\"Start location (e.g., Besiktas)\">\r\n  <input id=\"destination\" type=\"text\" placeholder=\"Destination (e.g., Kadikoy)\">\r\n  <button id=\"route-btn\" type=\"button\">Get driving directions<\/button>\r\n  <button id=\"clear-btn\" type=\"button\">Clear<\/button>\r\n<\/div>\r\n\r\n<div id=\"map\"><\/div>\r\n<div id=\"summary\"><\/div>\r\n\r\n<script>\r\n  let map, directionsService, directionsRenderer, originAutocomplete, destAutocomplete;\r\n  let hudDiv, destMarker, destInfo;\r\n\r\n  function initMap() {\r\n    map = new google.maps.Map(document.getElementById('map'), {\r\n      center: {lat: 41.0082, lng: 28.9784}, \/\/ Istanbul\r\n      zoom: 12,\r\n      mapTypeControl: false\r\n    });\r\n\r\n    directionsService = new google.maps.DirectionsService();\r\n    directionsRenderer = new google.maps.DirectionsRenderer({\r\n      draggable: true,\r\n      map: map\r\n    });\r\n\r\n    \/\/ Autocomplete\r\n    originAutocomplete = new google.maps.places.Autocomplete(\r\n      document.getElementById('origin'), { fields: ['place_id','geometry','name'] }\r\n    );\r\n    destAutocomplete = new google.maps.places.Autocomplete(\r\n      document.getElementById('destination'), { fields: ['place_id','geometry','name'] }\r\n    );\r\n\r\n    \/\/ HUD (distance \u2022 ETA \u2022 arrival) as a map control (top-right)\r\n    hudDiv = document.createElement('div');\r\n    hudDiv.className = 'map-hud';\r\n    hudDiv.textContent = 'Distance: \u2014 \u2022 ETA: \u2014 \u2022 Arrival: \u2014';\r\n    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(hudDiv);\r\n\r\n    \/\/ Recompute summary when route is dragged\r\n    google.maps.event.addListener(directionsRenderer, 'directions_changed', () => {\r\n      const dir = directionsRenderer.getDirections();\r\n      if (dir) updateSummary(dir);\r\n    });\r\n\r\n    document.getElementById('route-btn').addEventListener('click', calcRoute);\r\n    document.getElementById('clear-btn').addEventListener('click', clearRoute);\r\n  }\r\n\r\n  function calcRoute() {\r\n    const origin = document.getElementById('origin').value.trim();\r\n    const destination = document.getElementById('destination').value.trim();\r\n    if (!origin || !destination) {\r\n      alert('Please enter both start and destination.');\r\n      return;\r\n    }\r\n\r\n    const request = {\r\n      origin,\r\n      destination,\r\n      travelMode: google.maps.TravelMode.DRIVING,\r\n      provideRouteAlternatives: false\r\n    };\r\n\r\n    directionsService.route(request, (result, status) => {\r\n      if (status === 'OK') {\r\n        directionsRenderer.setDirections(result);\r\n        updateSummary(result);\r\n        placeDestinationMarker(result);\r\n      } else if (status === 'ZERO_RESULTS') {\r\n        setSummaryTexts('\u2014', '\u2014', '\u2014', 'No driving route found.');\r\n      } else {\r\n        setSummaryTexts('\u2014', '\u2014', '\u2014', 'Error: ' + status);\r\n      }\r\n    });\r\n  }\r\n\r\n  function updateSummary(directionsResult) {\r\n    let totalMeters = 0;\r\n    let totalSeconds = 0;\r\n    const route = directionsResult.routes[0];\r\n    route.legs.forEach(leg => {\r\n      totalMeters += leg.distance?.value || 0;\r\n      totalSeconds += leg.duration?.value || 0;\r\n    });\r\n\r\n    const km = (totalMeters \/ 1000).toFixed(1);\r\n    const hours = Math.floor(totalSeconds \/ 3600);\r\n    const minutes = Math.round((totalSeconds % 3600) \/ 60);\r\n    const timeStr = hours > 0 ? `${hours} h ${minutes} min` : `${minutes} min`;\r\n\r\n    const arrivalDate = new Date(Date.now() + totalSeconds * 1000);\r\n    const arrivalStr = arrivalDate.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});\r\n\r\n    setSummaryTexts(km, timeStr, arrivalStr);\r\n    \/\/ If there is an open destination info window, refresh its content\r\n    if (destInfo) {\r\n      destInfo.setContent(infoHtml(km, timeStr, arrivalStr));\r\n    }\r\n  }\r\n\r\n  function setSummaryTexts(km, timeStr, arrivalStr, overrideMsg) {\r\n    const text = overrideMsg ? overrideMsg : `Distance: ${km} km \u2022 ETA: ${timeStr} \u2022 Arrival: ${arrivalStr}`;\r\n    document.getElementById('summary').textContent = text;\r\n    hudDiv.textContent = text;\r\n  }\r\n\r\n  function placeDestinationMarker(directionsResult) {\r\n    \/\/ Clear previous\r\n    if (destMarker) { destMarker.setMap(null); destMarker = null; }\r\n    if (destInfo) { destInfo.close(); destInfo = null; }\r\n\r\n    const route = directionsResult.routes[0];\r\n    const lastLeg = route.legs[route.legs.length - 1];\r\n\r\n    destMarker = new google.maps.Marker({\r\n      map,\r\n      position: lastLeg.end_location,\r\n      title: lastLeg.end_address\r\n    });\r\n\r\n    \/\/ Build info text using current summary (already computed)\r\n    const currentTxt = document.getElementById('summary').textContent;\r\n    \/\/ Extract parts if available, else recompute quickly:\r\n    let km='\u2014', eta='\u2014', arr='\u2014';\r\n    const m = currentTxt.match(\/Distance:\\s([^\u2022]+)\u2022\\sETA:\\s([^\u2022]+)\u2022\\sArrival:\\s(.+)\/);\r\n    if (m) { km = m[1].trim(); eta = m[2].trim(); arr = m[3].trim(); }\r\n\r\n    destInfo = new google.maps.InfoWindow({\r\n      content: infoHtml(km, eta, arr)\r\n    });\r\n    destInfo.open(map, destMarker);\r\n\r\n    destMarker.addListener('click', () => {\r\n      destInfo.open(map, destMarker);\r\n    });\r\n  }\r\n\r\n  function infoHtml(km, eta, arrival) {\r\n    return `\r\n      <div style=\"font:600 13px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\">\r\n        <div>Distance: ${km}<\/div>\r\n        <div>ETA: ${eta}<\/div>\r\n        <div>Arrival: ${arrival}<\/div>\r\n      <\/div>`;\r\n  }\r\n\r\n  function clearRoute() {\r\n    directionsRenderer.setDirections({routes: []});\r\n    document.getElementById('summary').textContent = '';\r\n    hudDiv.textContent = 'Distance: \u2014 \u2022 ETA: \u2014 \u2022 Arrival: \u2014';\r\n    document.getElementById('origin').value = '';\r\n    document.getElementById('destination').value = '';\r\n    if (destMarker) { destMarker.setMap(null); destMarker = null; }\r\n    if (destInfo) { destInfo.close(); destInfo = null; }\r\n  }\r\n<\/script>\r\n\r\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>\r\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-9738","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>Mula sa kung saan papunta - 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\/fl\/mula-sa-kung-saan-papunta\/\" \/>\n<meta property=\"og:locale\" content=\"fi_FI\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mula sa kung saan papunta - Mariposas Tour\" \/>\n<meta property=\"og:description\" content=\"Get driving directions Clear\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/\" \/>\n<meta property=\"og:site_name\" content=\"Mariposas Tour\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-30T08:11:00+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\/fl\/mula-sa-kung-saan-papunta\/\",\"url\":\"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/\",\"name\":\"Mula sa kung saan papunta - Mariposas Tour\",\"isPartOf\":{\"@id\":\"https:\/\/mariposastour.com\/fl\/#website\"},\"datePublished\":\"2025-09-28T18:00:23+00:00\",\"dateModified\":\"2025-10-30T08:11:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/#breadcrumb\"},\"inLanguage\":\"fil-PH\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mariposastour.com\/fl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mula sa kung saan papunta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mariposastour.com\/fl\/#website\",\"url\":\"https:\/\/mariposastour.com\/fl\/\",\"name\":\"Mariposas Tour\",\"description\":\"Lets Colors the Memories\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mariposastour.com\/fl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fil-PH\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mula sa kung saan papunta - 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\/fl\/mula-sa-kung-saan-papunta\/","og_locale":"fi_FI","og_type":"article","og_title":"Mula sa kung saan papunta - Mariposas Tour","og_description":"Get driving directions Clear","og_url":"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/","og_site_name":"Mariposas Tour","article_modified_time":"2025-10-30T08:11:00+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/","url":"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/","name":"Mula sa kung saan papunta - Mariposas Tour","isPartOf":{"@id":"https:\/\/mariposastour.com\/fl\/#website"},"datePublished":"2025-09-28T18:00:23+00:00","dateModified":"2025-10-30T08:11:00+00:00","breadcrumb":{"@id":"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/#breadcrumb"},"inLanguage":"fil-PH","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mariposastour.com\/fl\/mula-sa-kung-saan-papunta\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mariposastour.com\/fl\/"},{"@type":"ListItem","position":2,"name":"Mula sa kung saan papunta"}]},{"@type":"WebSite","@id":"https:\/\/mariposastour.com\/fl\/#website","url":"https:\/\/mariposastour.com\/fl\/","name":"Mariposas Tour","description":"Lets Colors the Memories","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mariposastour.com\/fl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fil-PH"}]}},"_links":{"self":[{"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/pages\/9738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/comments?post=9738"}],"version-history":[{"count":1,"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/pages\/9738\/revisions"}],"predecessor-version":[{"id":9739,"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/pages\/9738\/revisions\/9739"}],"wp:attachment":[{"href":"https:\/\/mariposastour.com\/fl\/wp-json\/wp\/v2\/media?parent=9738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}