Example street view component utilizing MapsAPILoader from @agm/core package

streetview.component.css

#streetview-map {
  display: none;
}

#streetview-pano {
  width: 100%;
  height: 100%;
}

#streetview-container {
  position: relative;
}

* {
  height: 100%;
}

streetview.component.html

<div id="streetview-container">
  <div id="streetview-map" #streetviewMap></div>
  <div id="streetview-pano" #streetviewPano></div>
</div>

streetview.component.ts

// 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);
        });
      }
    }
  }

@Ekaanth can you give me a link to a repository with a reproduction of the problem? Then I will have a look for you :-)

Here is the code:

import { MapsAPILoader } from '@agm/core';
import { isPlatformBrowser } from '@angular/common';
import {
  ApplicationRef,
  Component,
  ElementRef,
  Inject,
  Input,
  OnChanges,
  PLATFORM_ID,
  ViewChild,
} from '@angular/core';

@Component({
  selector: 'app-street-view',
  templateUrl: './street-view.component.html',
  styleUrls: ['./street-view.component.scss'],
})
export class StreetViewComponent implements OnChanges {
  @ViewChild('streetviewMap') streetviewMap: ElementRef;
  @ViewChild('streetviewPano') streetviewPano: ElementRef;
  @Input() latitude: number;
  @Input() longitude: number;
  @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,
    private appRef: ApplicationRef
  ) {}

  ngOnChanges() {
    this.renderStreetView();
  }

  renderStreetView() {
    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
        );
        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);
        this.appRef.tick();
      });
    }
  }
} 

This is the same code but the difference is I will receive the lat and lon coordinates. i hope this will help you understand, if there is anything please let me know.

@Ekaanth can you give me a link to a repository with a reproduction of the problem? Then I will have a look for you :-)

HI, is there any update? Im still facing this issue.

@Ekaanth, I just made a repo https://github.com/cmddavid/ng-streetview-test to replicate the problem with the code you provided. It is however working as expected. Even when I add a timeout to simulate a wait for an api request the street view gets painted as expected. Can you fork the repo and break it by implementing behavior that is as close as possible to the project you are facing the problem?

hello ,can you tell me how do you get parameters like heading ,pitch ,zoom dynamically i.e by any api

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