google-mapsgoogle-street-view

Different default viewports in Google Static Streetview API vs Google Maps Embed API


I'm looking for a way to get the default heading in the Google Maps Streetview Embed with the same accuracy/heading as the static Streetview.

For a project I'm using the Google Maps static Streetview API to create a snapshot/front facing view of an address. The way I do this is to first find the address LatLng with the Google GeoCode API, using the full address (streetname+house_number+house_number_addition+zipcode+city). With the latLng I then call the Static streetview API to fetch a snapshot of this location.

https://maps.googleapis.com/maps/api/streetview?size=900x600&location={$latLng}&key={$key}"

As you can see there is no heading param specified so the API determines the best possible heading based on the given LatLng, as specified in the API docs.

The result is spot on for 99% of the cases, in which the house is almost perfectly centered in the streetview snapshot.

The Google maps streetview embed has a very different result. The steps leading up to the creation of the embed URL are identical (find the latlng based on the full address, and use the LatLng as the location in the embedcode)

https://www.google.com/maps/embed/v1/streetview?key={$key}&location={$latLng}"

resulting in the iframe HTML

<iframe src='{https://www.google.com/maps/embed/v1/streetview?key={$key}&location={$latLng}"}' width='600' height='450' frameborder='0' style='border:0;' allowfullscreen='' aria-hidden='false' tabindex='0'></iframe>

In this case the heading or camera direction is in many (not all) cases almost facing opposite of the targeted house. Of course this can be adjusted using the heading param, but it's strange that both streetview API's differ so much in the chosen heading.


Solution

  • After some more digging I found the answer here. The solution is to first use the Directions API to navigate to the given location, which sets the heading facing the location. Then use the getPanoramaByLocation method of the StreetviewService to determine the correct heading.

    So instead of constructing the embed code serverside, the best approach seems to create the Streetview in the frontend using the Google Maps API.