JSFiddle - React, Tailwind, and code Playground

by Mapycz

HTML

<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, minimal-ui" />
		<meta charset="utf-8" />
		<meta name="description" content="Panorama testing" />
		<title>Panorama testin</title>

		<meta name="msapplication-TileColor" content="#da532c" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />

		<script type="text/javascript" async src='https://api.mapy.cz/js/panorama/v1/panorama.js' id="panoScript"></script>
	</head>
	<body>
		<div id="panoCont" style="height: 500px; border: 1px solid #000;"></div>
    <div id="infoCont" style="text-align: center; color: #c01;">Pano is loading...</div>
	</body>
</html>

JavaScript

const script = document.querySelector("#panoScript");

async function createPano() {
	const container = document.querySelector("#panoCont");
  const infoContainer = document.querySelector("#infoCont");
  
  // after script load -> window.Panorama namespace
  infoContainer.textContent = "Loading pano from position...";
    
  const panoData = await Panorama.panoramaFromPosition({
    parent: container,
    // WGS84 lon/lat
    lon: 16.6080370,
    lat: 49.1949758,
    yaw: 'auto',
    // api key
    apiKey: "eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY",
  });

	console.log(panoData.info);
  infoContainer.textContent = panoData.error;
}

script.addEventListener("load", () => {
  const infoContainer = document.querySelector("#infoCont");

	infoContainer.textContent = "Script is loaded";
  
  createPano();
});