\n
\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 */\n// Load the Visualization API and the columnchart package.\n// @ts-ignore TODO update to newest visualization library\ngoogle.load(\"visualization\", \"1\", { packages: [\"columnchart\"] });\n\nfunction initMap() {\n // The following path marks a path from Mt. Whitney, the highest point in the\n // continental United States to Badwater, Death Valley, the lowest point.\n const path = [\n { lat: 36.579, lng: -118.292 },\n { lat: 36.606, lng: -118.0638 },\n { lat: 36.433, lng: -117.951 },\n { lat: 36.588, lng: -116.943 },\n { lat: 36.34, lng: -117.468 },\n { lat: 36.24, lng: -116.832 },\n ]; // Badwater, Death Valley\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n zoom: 8,\n center: path[1],\n mapTypeId: \"terrain\",\n });\n // Create an ElevationService.\n const elevator = new google.maps.ElevationService();\n\n // Draw the path, using the Visualization API and the Elevation service.\n displayPathElevation(path, elevator, map);\n}\n\nfunction displayPathElevation(path, elevator, map) {\n // Display a polyline of the elevation path.\n new google.maps.Polyline({\n path: path,\n strokeColor: \"#0000CC\",\n strokeOpacity: 0.4,\n map: map,\n });\n // Create a PathElevationRequest object using this array.\n // Ask for 256 samples along that path.\n // Initiate the path request.\n elevator\n .getElevationAlongPath({\n path: path,\n samples: 256,\n })\n .then(plotElevation)\n .catch((e) => {\n const chartDiv = document.getElementById(\"elevation_chart\");\n\n // Show the error code inside the chartDiv.\n chartDiv.innerHTML = \"Cannot show elevation: request failed because \" + e;\n });\n}\n\n// Takes an array of ElevationResult objects, draws the path on the map\n// and plots the elevation profile on a Visualization API ColumnChart.\nfunction plotElevation({ results }) {\n const chartDiv = document.getElementById(\"elevation_chart\");\n // Create a new chart in the elevation_chart DIV.\n const chart = new google.visualization.ColumnChart(chartDiv);\n // Extract the data from which to populate the chart.\n // Because the samples are equidistant, the \'Sample\'\n // column here does double duty as distance along the\n // X axis.\n const data = new google.visualization.DataTable();\n\n data.addColumn(\"string\", \"Sample\");\n data.addColumn(\"number\", \"Elevation\");\n\n for (let i = 0; i < results.length; i++) {\n data.addRow([\"\", results[i].elevation]);\n }\n\n // Draw the chart using the data within its DIV.\n chart.draw(data, {\n height: 150,\n legend: \"none\",\n // @ts-ignore TODO update to newest visualization library\n titleY: \"Elevation (m)\",\n });\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/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\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 } Showing Elevation Along a Path - JSFiddle - Code Playground

JSFiddle

  • zapGo PRO
  • Settings
  • Sign in