angular / angular/components

feat(google-maps): Adding a streetview component

Open
#26,255 0 comments 6 reactions 0 assignees View on GitHub
area: google-maps feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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?

Contributor guide

Open the contributing guide

Research direction

Start with the google-maps package and its src/google-maps/map-marker component, then review the linked Google Maps StreetViewPanorama and StreetViewEvents APIs. Done means a map-streetview component supports the proposed inputs and outputs, with overlays and marker integration defined and covered by appropriate tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.