Clever Geek Handbook

Google Place Street View is not the same as Google Maps when using the Code API

I have the following problem:

I am trying to show Street View for a specific place (bussiness / google place ID), but what I give is not the same result as going to google map and searching for that place.

Example:

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

Fetching the location of a place through the Places API and then displaying the 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 observe that I have the same street view as on google maps, but instead I get another point in the irrelevant part of the business. How to get the correct one:

I have added one screenshot to the code for additional reference.

There are a few times when I get an indoor business class street view but shows an indoor business in the next room because the one I'm looking for doesn't have a street view, but Google maps show the correct street street view instead.

+3


source to share


1 answer


It looks like the API binds to the nearest road and shows the Street View Imagery from that position.

enter image description here

You can try using StreetViewService

to find the best available panorama, not the closest one. In addition, you can filter out all closed panoramas.



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 changed the example: https://plnkr.co/edit/6haMg7hTd4mI6qLpeF5U?p=preview

Hope this helps!

+1


source






More articles:


All Articles