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

Just to explain, I use the mapsAPILoader to detect when Google maps is fully loaded. And then I use the regular Google Maps API to generate a hidden map + visible street view panorama.

Hi man, I've tried your code, and looks so well, but the street mode view starts with a black screen, do you know what could it be?

Thanks

@cmddavid tried this example. I am also getting a blank screen when it first loads. Any idea to fix this ?

@cmddavid tried this example. I am also getting a blank screen when it first loads. Any idea to fix this ?

Hi, were you able to solve this issue?? Im also facing the same but when i click on fullscreen the street view works perfectly.

Hi man, I've tried your code, and looks so well, but the street mode view starts with a black screen, do you know what could it be?

Thanks

Hi, were you able to solve this issue?? Im also facing the same but when i click on fullscreen the street view works perfectly.

Hi guys(@Ekaanth, @gihanmu), sorry for the late response. I don't use GitHub that much. I can take a look for you guys tomorrow if needed, would be helpful if you can provide a link to a repo containing a repro of the problem.

I didnt experience any problem like this myself, I used it in the following website: https://www.hbhousing.nl/huurwoning/amsterdam/ijburg/ijburg-zuid/johan-huijsenstraat/3459

You can click "Toon street view" to see it in action there. Maybe from the example there you can already tell why it is working for me but not for you.

Hi guys(@Ekaanth, @gihanmu), sorry for the late response. I don't use GitHub that much. I can take a look for you guys tomorrow if needed, would be helpful if you can provide a link to a repo containing a repro of the problem.

I didnt experience any problem like this myself, I used it in the following website: https://www.hbhousing.nl/huurwoning/amsterdam/ijburg/ijburg-zuid/johan-huijsenstraat/3459

You can click "Toon street view" to see it in action there. Maybe from the example there you can already tell why it is working for me but not for you.

Hi, can you please look into the code that will be helpful, I tried various ways and still im facing the same way. not sure why. I have already spent lot of time on it already.
dankjewel.

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

@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