Displaying a streetview

You can embed the hosted version of the Street View from WorldGuessr (uses Google API) at https://www.worldguessr.com/svEmbed into your custom client to let players explore interactive locations. This guide will show you how to specify the props and use the postMessage API to handle onLoad and updates.

Specifying Props

You can specify the following props as query parameters in the URL:

Prop	Type	Description	Default
nm	boolean	No movement mode. Disables movement in Street View.	false
npz	boolean	No pan and zoom mode. Disables panning and zooming in Street View.	false
showRoadLabels	boolean	Show road labels in Street View.	true
lat	number	Latitude for the initial position in Street View.	null
long	number	Longitude for the initial position in Street View.	null
showAnswer	boolean	A way to quickly remove all restrictions (nm,npz) so that the user can explore the surroundings after they had made their guess.	false
hidden	boolean	Quickly hide/show the Street View without triggering refresh. You may prefer to do this externally, setting hidden to false always	false

Example embed with query parameters:

<iframe
  src="https://www.worldguessr.com/svEmbed?nm=true&npz=true&showRoadLabels=false&lat=37.7749&long=-122.4194&showAnswer=true&hidden=false"
  width="100%"
  height="100%"
  style="border: none;"
  title="Street View Embed"
  frameBorder="0"
></iframe>

In non-html frameworks like React Native, you can use the react-native-webview package to embed and use the WorldGuessr svEmbed endpoint.

Using postMessage API

Handling onLoad

This is really important to know when to hide a loading animation. To handle the onLoad event, you can listen for the onLoad message on the parent iframe:

window.addEventListener("message", (event) => {
  if (event.data && event.data.type === "onLoad") {
    console.log("Street View Loaded");
  }
});

Updating Props

To update props dynamically, you can use the postMessage API to send an updateProps message to the iframe.

IMPORTANT: Note that it is NOT SUPPORTED/CAN CAUSE CRASHES to change the latitude (lat) and longitude (long) using postMessage due to a memory leak bug on Google's end.

For changing lat and long, you need to reload the entire iframe.

Example of updating props:

const iframe = document.getElementById("streetview");

const newProps = {
  nm: true,
  npz: false,
  showRoadLabels: true,
  showAnswer: false,
  hidden: false,
};

iframe.contentWindow.postMessage({ type: "updateProps", props: newProps }, "*");

Reloading the location

To change the latitude and longitude or to snap user back to original position, you need to reload the iframe:

const iframe = document.getElementById("streetview");

iframe.src = // updated url with props go here

Internal Implementation

Streetview integration is implemented through the use of 2 main components in components/streetview

https://github.com/codergautam/worldguessr/tree/master/components/streetview

PRs are welcome to improve optimizations/ease of use