\n
\n \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 */\nlet panorama;\n\nfunction initMap() {\n const astorPlace = { lat: 40.729884, lng: -73.990988 };\n // Set up the map\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center: astorPlace,\n zoom: 18,\n streetViewControl: false,\n });\n\n document.getElementById(\"toggle\").addEventListener(\"click\", toggleStreetView);\n\n const cafeIcon = document.createElement(\"img\");\n\n cafeIcon.src =\n \"https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg\";\n\n const dollarIcon = document.createElement(\"img\");\n\n dollarIcon.src =\n \"https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg\";\n\n const busIcon = document.createElement(\"img\");\n\n busIcon.src =\n \"https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg\";\n\n // Set up the markers on the map\n const cafeMarker = new google.maps.Marker({\n position: { lat: 40.730031, lng: -73.991428 },\n map,\n title: \"Cafe\",\n icon: cafeIcon.src,\n });\n const bankMarker = new google.maps.Marker({\n position: { lat: 40.729681, lng: -73.991138 },\n map,\n title: \"Bank\",\n icon: dollarIcon.src,\n });\n const busMarker = new google.maps.Marker({\n position: { lat: 40.729559, lng: -73.990741 },\n map,\n title: \"Bus Stop\",\n icon: busIcon.src,\n });\n\n // We get the map\'s default panorama and set up some defaults.\n // Note that we don\'t yet set it visible.\n panorama = map.getStreetView(); // TODO fix type\n panorama.setPosition(astorPlace);\n panorama.setPov(\n /** @type {google.maps.StreetViewPov} */ {\n heading: 265,\n pitch: 0,\n },\n );\n}\n\nfunction toggleStreetView() {\n const toggle = panorama.getVisible();\n\n if (toggle == false) {\n panorama.setVisible(true);\n } else {\n panorama.setVisible(false);\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#floating-panel {\n position: absolute;\n top: 10px;\n left: 25%;\n z-index: 5;\n background-color: #fff;\n padding: 5px;\n border: 1px solid #999;\n text-align: center;\n font-family: \"Roboto\", \"sans-serif\";\n line-height: 30px;\n padding-left: 10px;\n}\n\n#floating-panel {\n margin-left: -100px;\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 } Overlays Within Street View - JSFiddle - Code Playground

JSFiddle

  • zapGo PRO
  • Settings
  • Sign in