angular / angular/components

feat(google-maps): Adding a streetview component

Offen
#26,255 0 Kommentare 6 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: google-maps feature P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Feature Description

Thanks for the awesome `google-maps` package! It abstracts away most of the gmaps logic that we heavily make use of in our apps.

But we're still missing one more functionality, namely an ng-like wrapper around the streetview panorama.

An ideal `map-streetview` component could go something like this:
```html

```
The (optional) `@Input() map` would be the map that [allows binding to external panoramas](https://github.com/googlemaps/js-types/blob/main/index.d.ts#L4210).
The (optional) `@Input overlays` would [support native gmaps overlays](https://developers.google.com/maps/documentation/javascript/streetview#StreetViewOverlays) but ideally also this package's [`map-marker`](https://github.com/angular/components/tree/main/src/google-maps/map-marker)s.
The `@Output`s would be consistent with the standard [streetview events](https://developers.google.com/maps/documentation/javascript/streetview#StreetViewEvents).

See section below for more details.

### Use Case

In order to mirror [`map-marker`](https://github.com/angular/components/tree/main/src/google-maps/map-marker)s onto the panorama:

![image](https://user-images.githubusercontent.com/9054705/207418752-842ce069-9155-4907-908f-da7a77807c66.png)

we have to resort to the native JS API where we take advantage of the fact that `google.maps.Marker` instances get be bound to a `google.maps.StreetViewPanorama` [via `.setMap`](https://github.com/googlemaps/js-types/blob/346f9c9028e92a177cd6a76289e39d7407c99048/index.d.ts#L5138).

When the map markers are dragged, we can listen to the position changes and update the streetview markers' positions accordingly:
```typescript
// keep the map marker and its corresponding panorama marker in sync
google.maps.event.addListener(rawMarker, 'position_changed', () => {
panoramaMarker.setPosition(rawMarker.getPosition().toJSON());
});
```

But since we're using `map-markers` (and not the native `google.maps.Marker`s), we have to access the underlying native markers, pass them onto the native streetview and deal with "component" lifecycles manually.

Summing up, it'd be neat to have a `map-streetview` component.
If it were to support custom overlays such as native markers (or any of the components [in this package](https://github.com/angular/components/tree/main/src/google-maps) that implement `google.maps.OverlayView`), all the better!

Thoughts?

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem Paket google-maps und seiner Komponente src/google-maps/map-marker, und überprüfe anschließend die verknüpften Google Maps StreetViewPanorama- und StreetViewEvents-APIs. Als abgeschlossen gilt die Arbeit, wenn eine map-streetview-Komponente die vorgeschlagenen Eingaben und Ausgaben unterstützt und die Integration von Overlays und Markern definiert und durch geeignete Tests abgedeckt ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.