CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Jay Elrod
Jay Elrod

Reputation: 738

Google maps StreetViewPanorama display error

I'm trying to make a street panorama of a given location on a map. Sometimes the panorama works fine with the location as the position of the panorama, and other times it shows only a gray screen with controls. To solve this, I am trying to use the StreetViewService.getPanoramaByLocation(). The returned LatLng from this function is VERY close to the LatLng's of the locations of panoramas that already work, but the panorama is ALWAYS gray when I use this input as position. I've done lots of research and still cannot solve the problem.

Here is my code:

    function init() {
        var location = new google.maps.LatLng(<%=id%>);
        map = new google.maps.Map(document.getElementById("map_canvas"), {
            center: location,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        marker = new google.maps.Marker({
            map: map,
            position: location
        });

        var client = new google.maps.StreetViewService();
        client.getPanoramaByLocation(location, 49, function(result, status) {
            if (status == "OK" )
                location = result.location.latLng;
        });
        myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), {
            position: location,
            pov: {
              pitch: -10,
              heading: 0,
              zoom: 1
            }
        });
    }

Any help would be greatly appreciated! Thanks!

Upvotes: 4

Views: 2056

Answers (1)

duncan
duncan

Reputation: 31922

I do this slightly differently from you. I only create the StreetViewPanorama if the status is 'ok'

var sv = new google.maps.StreetViewService();

sv.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
    if (status == 'OK') {
        //google has a streetview image for this location, so attach it to the streetview div
        var panoramaOptions = {
            pano: data.location.pano,
            addressControl: false,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        }; 
        var panorama = new google.maps.StreetViewPanorama(document.getElementById(strMapCanvasID), panoramaOptions);
    }
    else{
        //no google streetview image for this location, so hide the streetview div
        $('#' + strMapCanvasID).parent().hide();
    }
});

Upvotes: 6

Related Questions