Несколько примеров использования Street View от Google Maps

Автор: | 03.03.2012

21 февраля 2012 года использовать сервис Street View от Google Maps стало возможно в России.
Были выложены отснятые панарамы Москвы, Санкт-Петербурга, а также и других населенных пунктов: Химки, Мытищи, Подольск, Домодедово, Петергоф, Пушкин, Павловск, Кронштадт и Ломоносов.

В этой заметке я покажу как можно использовать данный сервис на нескольких примерах.

Первый вариант, это использование специального элемента управления (оранжевого человечка).

Посмотреть пример в действии

Сразу после загрузки страницы с примером, мы наблюдаем карту Санкт-Петербурга.

Стандартно, с левой стороны мы видим элементы управления картой.

Над элементом управления масштабом карты расположен рисунок в виде оранжевого человечка.

Если подвести к нему курсор мыши, то он откланяется, нажав левую кнопку мыши мы можем тащить его на карту.

В это время все улицы, для которых существуют панорамы подсвечиваются синим цветом, мы опускаем человечка в нужном месте и наблюдаем панораму данной улицы.

Код файла примера:

<!DOCTYPE html>
<html DIR="LTR" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример Google Maps JavaScript API v3 - слой просмотра улиц (Street View)</title>
<link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
  function initialize() {
    var moscow = new google.maps.LatLng(59.933836,30.307698);
    var mapOptions = {
      center: moscow,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 800px; height: 600px"></div>
 </body>
</html>

Второй пример, одновременное отображение двух окон — с картой и панорамой.

Посмотреть пример в действии

Код файла примера:

 
<!DOCTYPE html>
<html DIR="LTR" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Пример Google Maps JavaScript API v3 - совместное отображение карты и слоя просмотра улиц (Street View)</title>
<link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
 
  function initialize() {
    var moscow = new google.maps.LatLng(59.939448, 30.328264);
    var mapOptions = {
      center: moscow,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), mapOptions);
    var panoramaOptions = {
      position: moscow,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
    map.setStreetView(panorama);
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width: 600px; height: 400px; top: 5px;"></div>
  <div id="pano" style="position:absolute; left:610px; top: 5px; width: 600px; height: 400px;"></div>
</body>
</html>

Обратите внимание, как задаются параметры для отображения панорамы.

Координаты определяют только позицию камеры, ее ориентация задается тремя свойствами:

heading (по умолчанию 0) – определяет угол поворота вокруг позиции камеры в градусах относительно истинного севера. Компасные курсы измеряются по часовой стрелке (90 градусов – истинный восток).

pitch (по умолчанию 0) – определяет отклонение угла вверх или вниз от исходного угла наклона камеры по умолчанию, который часто (но не всегда) совершенно горизонтален. (Например, для снимка с возвышенности, скорее всего, будет использоваться угол наклона по умолчанию, который в данном случае отличен от горизонтали.) Углы наклона выражаются отрицательными числами при отклонении вверх (–90 градусов вертикально вверх и под прямым углом к наклону по умолчанию) и положительными числами при отклонении вниз (+90 градусов вертикально вниз и под прямым углом к наклону по умолчанию).

zoom (по умолчанию 1) – определяет уровень масштабирования данного просмотра (эффективно ограничивая поле зрения), где 0 означает полное уменьшение изображения. Большинство местоположений просмотра улиц поддерживают уровни масштабирования от 0 до 3 включительно.

Для нашего примера:

позиция камеры — 59.939448, 30.328264;

heading — 34;

pitch — 10;

zoom — 1

Третий пример, в котором расположение меток, мы задаем в виде массива координат.

При щелчке по метке, открывается информационное окно (балун) с панорамой в данной точке.

Посмотреть пример в действии

Четвертый пример, основное окно — панорама, в правом нижнем углу расположена миникарта для управления местоположением камеры.

Посмотреть пример в действии

Пятый пример, при щелчке на маркере, отображается балун с панорамой и дополнительным элементом управления масштабом панорамы.

Посмотреть пример в действии

Подробнее об использовании сервис Street View можно прочитать в документации

Загрузить архив с файлами примеров

В заключении заметки несколько ссылок на виртуальные прогулки по многим парковым ансамблям и вокруг памятников архитектуры.

Москва и Московская область

Санкт-Петербург и Ленинградская область

Казань

Несколько примеров использования Street View от Google Maps: 4 комментария

  1. Рома

    Спасибо, отличные полезные вещи у вас, постоянно захожу смотреть новые вещи. Порадовали, очень нужная штука!

  2. Lusi

    Спасибо автору! Только вопрос — можно ли это использовать на карте, кот. выводится в описании объекта каталога sobi2 (встроенной)? И если можно, то не могли бы вы пояснить, как? Большое спасибо.

    1. admin Автор записи

      В sobi2 используется карта API Google Maps v2, там со Street View нужно по другому работать, чем в API Google Maps v3.
      Вот ссылка на документацию

  3. Женя

    Здравствуйте, а возможно ли(если да, то как) добавить кнопку для полноэкранного просмотра панорам

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *