Размещаем панораму на сайте с помощью Google Maps API.

В процессе ...

Получаем ключ API на сайте Google API Диспетчер. Здесь можно посмотреть пример. Снимаем панораму и режем ее на части (Для примера).

Панораму делал для сайта Режевского исторического музея, снимал на обычный телефон, так что качество снимка оставляет желать лучшего. Хотелось бы попробовать поснимать на панорамные камеры:

Следующий шаг встроить кликабельные объекты в панораму.

Вот что получилось:




HTML код:

<p>Уникальная экспозиция, созданная еще в 1995 г. повествует о великом подвиге советского народа, в общем, и режевлян, в частности, предлагает окунуться в разрушенный трагедией мир каждой семьи и увидеть подлинные предметы военного времени.</p>

<style>
      #panobody {
        height: 600px;
        margin: 0;
        padding: 0;
      }
      #street-view {
        height: 100%;
      }
</style>

<div id="panobody"><div id="street-view"></div></div>
<script>
function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('street-view'), {
      pano: 'exposition',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
        return '/images/pano/' +
            'v001-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
}

function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'exposition') {
    return {
      location: {
        pano: 'exposition',
        description: 'Режевляне в годы Великой Отечественной войны'
      },
      links: [],
      // The text for the copyright control.
    copyright: 'Imagery (c) 2016 Режевской исторический музей',
      // The definition of the tiles for this panorama.
      tiles: {
      tileSize: new google.maps.Size(3584, 1792),
      worldSize: new google.maps.Size(7168, 3584),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 0,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}

</script>

<script async defer src="//maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initPano" type="text/javascript"></script>




<!--
<iframe src="//www.google.com/maps/embed?pb=!1m0!3m2!1sru!2sru!4v1468664391031!6m8!1m7!1sF%3A-HU3o-bECq_o%2FV4oFLNzoISI%2FAAAAAAAA0Eg%2FvWa6zcUPu-4J4PrjvE9tae8E05A06PFkwCLIB!2m2!1d57.37452641505438!2d61.39211078522476!3f52.6614939639019!4f-22.365737366261456!5f0.7820865974627469" width="100%" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
-->

Ссылки