angularjsgoogle-mapsgoogle-maps-api-3google-street-view

Google Place's Street View is not the same as google maps when using API on code


I've the following problem,

I'm trying to show the Street View for a specific place (bussiness/google place ID), but what I'm giving is not the same result as when you go to google map and search for that Place.

Example:

Searching at google the Bussiness/Place: https://www.google.com.mx/maps/place/Adidas/@34.0838081,-118.3640503,17z/data=!4m12!1m6!3m5!1s0x80c2becbfdfa91f9:0xcc0878717da8381!2sAdidas!8m2!3d34.0840354!4d-118.3640653!3m4!1s0x80c2becbfdfa91f9:0xcc0878717da8381!8m2!3d34.0840354!4d-118.3640653?hl=es

Extracting location of a place by Places API and then showing Street View for that location:

`

angular.module('plunker', ['ui.bootstrap', 'ngMap']).controller('MapDemoCtrl', ["$scope","NgMap",function ($scope, NgMap) {


  var placeId = "ChIJ-ZH6_cu-woARgYPaF4eHwAw";


  NgMap.getMap({id:'mapId'}).then(function(map){
    var mapSV = map.getStreetView();
    var placeS = new google.maps.places.PlacesService(map);
    var streetS = new google.maps.StreetViewService();

    placeS.getDetails({placeId:placeId},function(res){
        console.log("Res",res);
        var placeLocation = res.geometry.location; 
        map.setCenter(placeLocation);
        mapSV.setPosition(placeLocation);
        mapSV.setVisible(true);
        window.place = res;

        var marker = new google.maps.Marker({
          position: placeLocation,
          map: map,
          title: "Place"
        });

        marker.addListener("click",function(ev){
          console.log("dada",ev);
          mapSV.setPosition(ev.latLng);
          mapSV.setVisible(true);
        })
    });
  })

}]);

`

https://plnkr.co/edit/H3ChFcmlQArCPfb2RCNI?p=preview

I'm specting to have the same Street view Location that google maps show , but instead I'm getting another that point's to a non relevant part of the bussiness. How do I get the correct one:

I've added one screnshoot on the code for more reference.

There are some times that I get the indoor Street View of a Bussiness, but shows the indoor of the next door bussiness because the one I'm looking for hasn't street view, but google maps instead shows the correct outdoor street view.


Solution

  • It looks like the API snaps to the nearest road and shows the Street View Imagery from this position.

    enter image description here

    You can try to use the StreetViewService to search the best available panorama instead of the nearest one. Also, you can filter out all indoor panos.

    NgMap.getMap({id:'mapId'}).then(function(map){
    var mapSV = map.getStreetView();
    var placeS = new google.maps.places.PlacesService(map);
    var streetS = new google.maps.StreetViewService();
    
    placeS.getDetails({placeId:placeId},function(res){
        console.log("Res",res);
        var placeLocation = res.geometry.location; 
        map.setCenter(placeLocation);
    
        var panoRequest = {
            location: placeLocation,
            preference: google.maps.StreetViewPreference.BEST,
            source: google.maps.StreetViewSource.OUTDOOR
        };
    
        streetS.getPanorama(panoRequest, function(panoData, status){
              if (status === google.maps.StreetViewStatus.OK) {
                  mapSV.setPosition(panoData.location.latLng);
                  mapSV.setVisible(true);
              } else {
                  //Handle other statuses here
                  mapSV.setPosition(placeLocation);
                  mapSV.setVisible(true);
              }
          });
    
        window.place = res;
    
        var marker = new google.maps.Marker({
          position: placeLocation,
          map: map,
          title: "Place"
        });
    
        marker.addListener("click",function(ev){
          console.log("dada",ev);
          mapSV.setPosition(ev.latLng);
          mapSV.setVisible(true);
        })
    });
    })
    

    I modified the example: https://plnkr.co/edit/6haMg7hTd4mI6qLpeF5U?p=preview

    Hope this helps!