\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/*\n * Click the map to set a new location for the Street View camera.\n */\nlet map;\nlet panorama;\n\nfunction initMap() {\n const berkeley = { lat: 37.869085, lng: -122.254775 };\n const sv = new google.maps.StreetViewService();\n\n panorama = new google.maps.StreetViewPanorama(\n document.getElementById(\"pano\"),\n );\n // Set up the map.\n map = new google.maps.Map(document.getElementById(\"map\"), {\n center: berkeley,\n zoom: 16,\n streetViewControl: false,\n });\n // Set the initial Street View camera to the center of the map\n sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);\n // Look for a nearby Street View panorama when the map is clicked.\n // getPanorama will return the nearest pano when the given\n // radius is 50 meters or less.\n map.addListener(\"click\", (event) => {\n sv.getPanorama({ location: event.latLng, radius: 50 })\n .then(processSVData)\n .catch((e) =>\n console.error(\"Street View data not found for this location.\"),\n );\n });\n}\n\nfunction processSVData({ data }) {\n const location = data.location;\n const marker = new google.maps.Marker({\n position: location.latLng,\n map,\n title: location.description,\n });\n\n panorama.setPano(location.pano);\n panorama.setPov({\n heading: 270,\n pitch: 0,\n });\n panorama.setVisible(true);\n marker.addListener(\"click\", () => {\n const markerPanoID = location.pano;\n\n // Set the Pano to use the passed panoID.\n panorama.setPano(markerPanoID);\n panorama.setPov({\n heading: 270,\n pitch: 0,\n });\n panorama.setVisible(true);\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 } Directly Accessing Street View Data - JSFiddle - Code Playground

JSFiddle

  • zapGo PRO
  • Settings
  • Sign in