Skip to content

Instantly share code, notes, and snippets.

@cmddavid
Last active January 19, 2023 06:57
Show Gist options
  • Save cmddavid/65abdab6d2e1330b8838e795e7d6414b to your computer and use it in GitHub Desktop.
Save cmddavid/65abdab6d2e1330b8838e795e7d6414b to your computer and use it in GitHub Desktop.
Example street view component utilizing MapsAPILoader from @agm/core package
#streetview-map {
display: none;
}
#streetview-pano {
width: 100%;
height: 100%;
}
#streetview-container {
position: relative;
}
* {
height: 100%;
}
<div id="streetview-container">
<div id="streetview-map" #streetviewMap></div>
<div id="streetview-pano" #streetviewPano></div>
</div>
// based on https://developers.google.com/maps/documentation/javascript/examples/streetview-simple
import { Component, OnInit, ViewChild, Input, Inject, PLATFORM_ID } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector: 'app-streetview',
templateUrl: './streetview.component.html',
styleUrls: ['./streetview.component.scss']
})
export class StreetviewComponent implements OnInit {
@ViewChild('streetviewMap') streetviewMap: any;
@ViewChild('streetviewPano') streetviewPano: any;
@Input() latitude: number = 42.345573;
@Input() longitude: number = -71.098326;
@Input() zoom: number = 11;
@Input() heading: number = 34;
@Input() pitch: number = 10;
@Input() scrollwheel: boolean = false;
constructor(@Inject(PLATFORM_ID) private platformId: Object, private mapsAPILoader: MapsAPILoader) { }
ngOnInit() {
if(isPlatformBrowser(this.platformId)){
this.mapsAPILoader.load().then(() => {
let center = { lat: this.latitude, lng: this.longitude };
let map = new window['google'].maps.Map(this.streetviewMap.nativeElement, { center: center, zoom: this.zoom, scrollwheel: this.scrollwheel });
let panorama = new window['google'].maps.StreetViewPanorama(
this.streetviewPano.nativeElement, {
position: center,
pov: { heading: this.heading, pitch: this.pitch },
scrollwheel: this.scrollwheel
});
map.setStreetView(panorama);
});
}
}
}
@cmddavid
Copy link
Author

For my project where I used this component we have manpower for that. So its manual work for us. I don't think there is any possibility to automatically get the proper values. You can calculate the zoom level from given bounds via https://stackoverflow.com/questions/6048975/google-maps-v3-how-to-calculate-the-zoom-level-for-a-given-bounds
But that's only useful for normal Google Maps, not for Street View

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment