Link to google maps ignores url parameters for streetview

Question

I have a web site where I need to generate link to Google Maps in Street View mode. I have available the coordinates to generate the URL.

When I try this URL in a desktop browser, it does what I want, and takes me to a street in Norway, and activating street view:
https://maps.google.com/maps?spn=0.008443,0.022767&ctz=-60&t=h&z=16&layer=c&cbll=58.819625,5.75462&cbp=12,44.85,,0,18.41

When I try exaclty the same URL in a mobile browser, it just ignores the parameters, and redirects to http://maps.google.com . When I try another link that is not streetview, it works.

I noticed it first in an iPad, and then tried in a Samsung Galaxy using Firefox, and same there.

I even tried using Firefox on desktop using the mobile device emulator plugin emulating an iPad, and same there. So it is Google that does this if the user agent reports itself as a mobile device.

Then I tried to navigate to a specific location in Google Maps on the mobile device, and clicked on the street view icon. Then a new window was opened with this URL:
http://maps.gstatic.com/m/streetview/?panoid=vZ_OD_yZLEJYC5wQQ9q5zg&cbp=0,247.65935203825757,,0,0

This works for this location, but I need to generate the URL based on coordinates, so I don't have a valid panoid to use. Is panoid the only way to use url parameters for displaying street view on mobile device? If so, is there any API available for generating a panoid based on coordinates?

Answer 1

For Mobile Devices (that don't support normal web browsing option)

You will need to find the PanID by Lat/Lng

This is possible and here is an example of it:

Official (via the API) the url is http://maps.googleapis.com/maps/api/streetview?

http://maps.googleapis.com/maps/api/streetview?size=600x300&location=58.819625,5.75462&heading=250&fov=90&pitch=-10&sensor=false gets the actual image not metadata

This still works to get the metadata

http://cbk0.google.com/cbk?output=xml&ll=58.819625,5.75462

http://cbk0.google.com/cbk?output=xml&ll=58.819625,5.75462

returns in xml:

    <panorama><data_properties image_width="13312" image_height="6656" tile_width="512" tile_height="512" image_date="2010-08" pano_id="_dexjqha6c6zUEQ1PQeaFw" num_zoom_levels="3" lat="58.819625" lng="5.754620" original_lat="58.819646" original_lng="5.754602"><copyright>© 2012 Google</copyright><text>Kruneli</text><region>Sandnes, Rogaland</region><country>Norway</country></data_properties><projection_properties projection_type="spherical" pano_yaw_deg="214.6" tilt_yaw_deg="-104.6" tilt_pitch_deg="5.97"/><annotation_properties><link yaw_deg="32.12" pano_id="I8DY9jG5FZhsGpxYsL1VJA" road_argb="0x80ffffff" scene="0"><link_text>Krunehagen / Kruneli / Krunemyr</link_text></link><link yaw_deg="211.83" pano_id="f8cBtSWUvOwFcupKJNrYMw" road_argb="0x80ffffff" scene="0"><link_text>Kruneli</link_text></link></annotation_properties></panorama>

You can then use this information in a script to gain the location of each PanID streeview image of for the mobile device.

For reference: https://developers.google.com/maps/documentation/javascript/reference#StreetViewService

Answer 2

Based on the answer by @Mapperz, I came up with the following solution:

function openStreetview(lat,lon){
  var dataUrl = 'http://cbk0.google.com/cbk?output=json&ll=' + lat + ',' + lon + '&';
  $.ajax({
    url: dataUrl,
    dataType: 'jsonp',
    data: {}
  })
    .done(function (data) {
      if(data && data.Location && data.Location.panoId){
        var url = 'http://maps.google.com/maps?layer=c&cbp=0,,,,30&panoid=' + data.Location.panoId;
        window.open(url, '_self');
      } else {
        alert('Street View could not allocate position.');
      }
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
      alert('Street View - fail() \n textStatus: ' + textStatus + '\n errorThrown: ' + errorThrown);
    });
}