|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright 2026 Google LLC. All Rights Reserved. |
| 4 | + * SPDX-License-Identifier: Apache-2.0 |
| 5 | + */ |
| 6 | + |
| 7 | +// [START maps_streetview_overlays] |
| 8 | +let panorama: google.maps.StreetViewPanorama; |
| 9 | +let innerMap: google.maps.Map; |
| 10 | + |
| 11 | +async function initMap() { |
| 12 | + // Request needed libraries. |
| 13 | + const { Map } = (await google.maps.importLibrary( |
| 14 | + 'maps' |
| 15 | + )) as google.maps.MapsLibrary; |
| 16 | + |
| 17 | + // Set the location of Astor Place. |
| 18 | + const astorPlace = { lat: 40.729884, lng: -73.990988 }; |
| 19 | + |
| 20 | + const mapElement = document.querySelector( |
| 21 | + 'gmp-map' |
| 22 | + ) as google.maps.MapElement; |
| 23 | + |
| 24 | + innerMap = mapElement.innerMap; |
| 25 | + innerMap.setOptions({ |
| 26 | + mapTypeControl: false, |
| 27 | + streetViewControl: false, |
| 28 | + fullscreenControl: false, |
| 29 | + }); |
| 30 | + |
| 31 | + document |
| 32 | + .getElementById('toggle')! |
| 33 | + .addEventListener('click', toggleStreetView); |
| 34 | + |
| 35 | + const cafeIcon = document.createElement('img'); |
| 36 | + cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href; |
| 37 | + |
| 38 | + const dollarIcon = document.createElement('img'); |
| 39 | + dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href; |
| 40 | + |
| 41 | + const busIcon = document.createElement('img'); |
| 42 | + busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href; |
| 43 | + |
| 44 | + // Set up the markers on the map |
| 45 | + const cafeMarker = new google.maps.Marker({ |
| 46 | + position: { lat: 40.730031, lng: -73.991428 }, |
| 47 | + map: innerMap, |
| 48 | + title: 'Cafe', |
| 49 | + icon: cafeIcon.src, |
| 50 | + }); |
| 51 | + |
| 52 | + const bankMarker = new google.maps.Marker({ |
| 53 | + position: { lat: 40.729681, lng: -73.991138 }, |
| 54 | + map: innerMap, |
| 55 | + title: 'Bank', |
| 56 | + icon: dollarIcon.src, |
| 57 | + }); |
| 58 | + |
| 59 | + const busMarker = new google.maps.Marker({ |
| 60 | + position: { lat: 40.729559, lng: -73.990741 }, |
| 61 | + map: innerMap, |
| 62 | + title: 'Bus Stop', |
| 63 | + icon: busIcon.src, |
| 64 | + }); |
| 65 | + |
| 66 | + // We get the map's default panorama and set up some defaults. |
| 67 | + // Note that we don't yet set it visible. |
| 68 | + panorama = innerMap.getStreetView()!; // TODO fix type |
| 69 | + panorama.setPosition(astorPlace); |
| 70 | + panorama.setPov( |
| 71 | + /** @type {google.maps.StreetViewPov} */ { |
| 72 | + heading: 265, |
| 73 | + pitch: 0, |
| 74 | + } |
| 75 | + ); |
| 76 | +} |
| 77 | + |
| 78 | +function toggleStreetView(): void { |
| 79 | + const toggle = panorama.getVisible(); |
| 80 | + |
| 81 | + if (toggle == false) { |
| 82 | + panorama.setVisible(true); |
| 83 | + } else { |
| 84 | + panorama.setVisible(false); |
| 85 | + } |
| 86 | +} |
| 87 | + |
| 88 | +initMap(); |
| 89 | +// [END maps_streetview_overlays] |
0 commit comments