\n
\n
<\/div>\n
\n

Total Distance: <\/span><\/p>\n

<\/div>\n <\/div>\n <\/div>\n\n \n <\/script>\n <\/body>\n<\/html>\n", js: "/**\n * @license\n * Copyright 2019 Google LLC. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\nfunction initMap() {\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 4,\n center: { lat: -24.345, lng: 134.46 }, // Australia.\n });\n const directionsService = new google.maps.DirectionsService();\n const directionsRenderer = new google.maps.DirectionsRenderer({\n draggable: true,\n map,\n panel: document.getElementById(\"panel\"),\n });\n\n directionsRenderer.addListener(\"directions_changed\", () => {\n const directions = directionsRenderer.getDirections();\n\n if (directions) {\n computeTotalDistance(directions);\n }\n });\n displayRoute(\n \"Perth, WA\",\n \"Sydney, NSW\",\n directionsService,\n directionsRenderer,\n );\n}\n\nfunction displayRoute(origin, destination, service, display) {\n service\n .route({\n origin: origin,\n destination: destination,\n waypoints: [\n { location: \"Adelaide, SA\" },\n { location: \"Broken Hill, NSW\" },\n ],\n travelMode: google.maps.TravelMode.DRIVING,\n avoidTolls: true,\n })\n .then((result) => {\n display.setDirections(result);\n })\n .catch((e) => {\n alert(\"Could not display directions due to: \" + e);\n });\n}\n\nfunction computeTotalDistance(result) {\n let total = 0;\n const myroute = result.routes[0];\n\n if (!myroute) {\n return;\n }\n\n for (let i = 0; i < myroute.legs.length; i++) {\n total += myroute.legs[i].distance.value;\n }\n\n total = total / 1000;\n document.getElementById(\"total\").innerHTML = total + \" km\";\n}\n\nwindow.initMap = initMap;\n", css: "/**\n * @license\n * Copyright 2019 Google LLC. All Rights Reserved.\n * SPDX-License-Identifier: Apache-2.0\n */\n/* Optional: Makes the sample page fill the window. */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\n#container {\n height: 100%;\n display: flex;\n}\n\n#sidebar {\n flex-basis: 15rem;\n flex-grow: 1;\n padding: 1rem;\n max-width: 30rem;\n height: 100%;\n box-sizing: border-box;\n overflow: auto;\n}\n\n#map {\n flex-basis: 0;\n flex-grow: 4;\n height: 100%;\n}\n\n" }, fiddle: { version: "", slug: "", boilerplate: false }, panels: { html: "html", js: "javascript", css: "css" }, user: { id: "None", username: "" }, currentUser: false, isAuthor: false, features: { toggleSidebar: false } } // translations const I18n = { editor: { panels: { result: "Result", drag_to_reorder: "Drag tabs to reorder", tidy: "Tidy" }, sidebar: { toggle_sidebar: "Toggle sidebar" }, groups: { placeholder_value: "Assign to groups", search_placeholder_value: "Search for groups", no_choices_text: "No more groups", no_results_text: "No groups found", item_select_text: "Press to select", you_have_no_groups: "You have no groups" } } } const EditorUISettings = { // options that user can change layout: 1, darkTheme: true, tabSize: 2, matchBrackets: true, lineNumbers: true, lineWrapping: true, keyMap: "default", autoCloseTags: true, autoCloseBrackets: true, indentWithTabs: false, codeLinting: true, autoRun: EditorConfig.currentUser ? false : false, autoRunValid: EditorConfig.currentUser ? true : false, autoSave: EditorConfig.currentUser ? true : false, clearConsole: false, fontSize: 1, matchTags: false, foldGutter: true, codeHints: true, editorConsole: true } Draggable Directions - JSFiddle - Code Playground

JSFiddle

  • zapGo PRO
  • Settings
  • Sign in