Skip to content

feat(google-maps): Adding a streetview component #26255

Open
@jzzfs

Description

@jzzfs

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:

<map-streetview [map]="map"
                [overlays]="overlays"
                [...]="otherInputsLikePOVandPositionAndPitch"
                (pano_changed|position_changed|pov_changed...)="myHandler($event)">

The (optional) @Input() map would be the map that allows binding to external panoramas.
The (optional) @Input overlays would support native gmaps overlays but ideally also this package's map-markers.
The @Outputs would be consistent with the standard streetview events.

See section below for more details.

Use Case

In order to mirror map-markers onto the panorama:

image

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.

When the map markers are dragged, we can listen to the position changes and update the streetview markers' positions accordingly:

// 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.Markers), 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 that implement google.maps.OverlayView), all the better!

Thoughts?

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: google-mapsfeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions