Версия 2 Google Maps JavaScript API больше не доступна. Настоящее руководство предназначено для разработчиков, которые уже используют Google Maps JavaScript API v2 и переносят свой код на версию 3.
Между версиями Google Maps JavaScript API v2 и v3 есть много отличий. Приступив к работе с новым API, вы быстро обнаружите, что это не просто очередное обновление. Мы добавили много новых полезных функций и улучшили общее удобство использования API с точки зрения разработчика. Если вы планируете перейти с версии Google Maps JavaScript API v2 на версию Google Maps JavaScript API v3, это руководство поможет вам в ходе этого процесса. Также здесь вы найдете описание наиболее распространенных изменений для пользователей API v2.
Обзор
Процессы миграции разных приложений имеют небольшие различия, однако есть некоторые шаги, общие для всех проектов:
- Получите новый ключ. Для управления ключами в Google Maps JavaScript API теперь используется Google API Console. Прежде чем начать миграцию, обязательно получите новый ключ API.
- Обновите загрузочную строку API. В большинстве приложений Google Maps JavaScript API v3 загружается с помощью следующего кода:
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true_OR_false"></script>
- Обновите код. Объем требуемых изменений во многом зависит от вашего приложения. Ниже приведены примеры распространенных изменений.
- Всегда используйте ссылку на пространство имен google.maps. В v3 весь код Google Maps JavaScript API хранится в пространстве имен
google.maps.*
, а не в глобальном пространстве имен. В связи с этим большинство объектов были переименованы. Например, вместо GMap2
теперь нужно загружать google.maps.Map
.
- Удалите все ссылки на устаревшие методы. Некоторые служебные методы общего назначения, такие как
GDownloadURL
и GLog
, были удалены. Вы можете заменить их функции служебными библиотеками сторонних разработчиков или удалить ссылки на них из своего кода.
- (Необязательно) Добавьте в свой код библиотеки. Многие функции были перенесены в служебные библиотеки, чтобы каждому приложению нужно было загружать только те части API, которые оно использует.
- (Необязательно) Настройте свой проект для использования внешних методов v3. Внешние методы v3 можно использовать для проверки кода с помощью инструмента Closure Compiler или для активации подсказки мест в среде разработки. Узнайте больше о расширенной компиляции и внешних методах.
- Проведите тестирование и повторное тестирование. Вам еще осталось кое-что сделать, но вы уже значительно продвинулись в миграции вашего приложения на версию v3!
Изменения в Google Maps JavaScript API версии 3
Прежде чем планировать миграцию, вам нужно понять различия между Google Maps JavaScript API v2 и Google Maps JavaScript API v3. Последняя версия Google Maps JavaScript API была создана с нуля на основе современных методик программирования JavaScript, расширенного использования библиотек и упрощенного API. В API добавлено много новых функций, а некоторые привычные функции были изменены или даже удалены. В этом разделе описываются некоторые ключевые отличия между двумя версиями.
Ниже приведены некоторые из изменений в API v3.
- Оптимизированная базовая библиотека. Многие дополнительные функции перемещены в библиотеки, чтобы сократить нагрузку и время синтаксического анализа для Core API, обеспечивая быструю загрузку карт на любом устройстве.
- Повышена производительность ряда функций, например, прорисовки многоугольников и размещения маркеров.
- Новый подход к лимитам использования на стороне клиента больше оптимизирован для общих адресов, используемых прокси-серверами мобильных операторов и корпоративными брандмауэрами.
- Добавлена поддержка нескольких современных браузеров для компьютеров и мобильных устройств. Удалена поддержка Internet Explorer 6.
- Удалены многие вспомогательные классы общего назначения (такие как
GLog
или GDownloadUrl
). Сегодня существует множество отличных библиотек JavaScript, предоставляющих те же функции, например, Closure и jQuery.
- Реализация Street View в HTML5, которая будет загружаться на любом мобильном устройстве.
- Пользовательские панорамы Street View с вашими собственными фотографиями, которые позволяют вам делиться панорамами лыжных спусков, домов на продажу и других интересных мест.
- Настраиваемые стилизованные карты, которые позволяют изменять отображение элементов на базовой карте в соответствии с вашим уникальным стилем.
- Поддержка нескольких новых служб, в том числе Elevation и Distance Matrix.
- Улучшенная служба Directions предоставляет альтернативные маршруты, оптимизацию маршрутов (приближенные решения задачи коммивояжера), велосипедные маршруты (со слоем велосипедного транспорта), маршруты на общественном транспорте и перетаскиваемые маршруты.
- Обновленный формат геокодирования предоставляет более точную информацию, используя параметр type вместо значения
accuracy
из Google Maps Geocoding API v2.
- Поддержка нескольких информационных окон на отдельной карте.
Обновление вашего приложения
Ваш новый ключ
В Google Maps JavaScript API v3 используется новая система ключей. Это означает, что ключ версии v2 не будет работать с приложениями, использующими версию v3. Добавление ключа v3 перед развертыванием приложения в производственной среде откроет следующие возможности:
Ключ передается при загрузке Google Maps JavaScript API v3. Генерирование ключа:
- Перейдите в Google API Console и выполните вход с помощью своей учетной записи Google.
- Нажмите ссылку Services в левом меню и активируйте службу Google Maps JavaScript API v3.
- После активации службы ваш ключ API будет доступен на странице API Access в разделе Simple API Access. Приложения Maps API используют ключ для приложений браузера.
Идентификаторы клиента для лицензий на Maps APIs for Work
Если вы используете лицензию на Google Maps APIs for Work, вам потребуется идентификатор клиента вместо ключа. Ключ и идентификатор нельзя использовать вместе. Идентификаторы клиента похожи на ключи, но имеют следующие отличия:
- Приложения Google Maps APIs, использующие идентификатор клиента, имеют доступ к дополнительным функциям и лимитам, например, к инструменту Maps Analytics.
- Ваш идентификатор клиента создается Google Cloud Support и предоставляется вам в письме о регистрации Maps APIs for Work. Для создания или поиска идентификатора клиента не нужно использовать Google API Console.
- При загрузке Google Maps JavaScript API нужно использовать параметр
client
вместо параметра key
. Например:
<script src="//maps.googleapis.com/maps/api/js?v=3&client=gme-yourclientid&sensor=true_or_false" type="text/javascript"></script>
Идентификаторы клиента всегда имеют префикс gme-
.
Загрузка API
Первое изменение, которое вам потребуется внести в код своего приложения, связано с методом загрузки API. В версии v2 загрузка Google Maps JavaScript API выполнялась посредством запроса к http://maps.google.com/maps
. Для загрузки Google Maps JavaScript API v3 нужно внести следующие изменения:
- Загружайте API с адреса
//maps.googleapis.com/maps/api/js
.
- Удалите параметр
file
.
- Добавьте обязательный параметр
sensor
.
- Обновите параметр
key
, указав свой новый ключ v3. Пользователи Google Maps APIs for Work должны использовать параметр client
.
- (только для Google Maps APIs Premium Plan) Убедитесь, что указан параметр
client
, как описано в руководстве для разработчиков по Google Maps APIs Premium Plan.
- Удалите параметр
v
, чтобы запрашивать последнюю выпущенную версию, или измените его в соответствии со схемой обозначения версий v3.
- (Необязательно) Замените параметр
hl
параметром language
и сохраните его значение.
- (Необязательно) Добавьте параметр
libraries
для загрузки дополнительных библиотек.
В самом простом случае в загрузочной строке v3 будут указаны только ключ API и параметр sensor:
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>
Для примера ниже требуется последняя (экспериментальная) версия Maps JavaScript API v2 на немецком языке:
<script type="text/javascript" src="//maps.google.com/maps?file=api&v=2.x&sensor=false&key=YOUR_API_KEY&hl=de"></script>
В примере ниже показан эквивалентный запрос для v3.
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY&language=de"></script>
Определение версии
В v3 не требуется загрузка определенной версии. Если вы пропустите параметр version, вы получите последнюю экспериментальную версию API. По желанию вы можете указать конкретный номер версии, последнюю (экспериментальную) версию или самую стабильную зафиксированную версию.
В таблице ниже показано соответствие схем обозначения для v2 и v3.
v2 |
v3 |
Вариант использования |
2.s |
3.0 |
Зафиксированная версия. Самая старая доступная версия. |
2 |
3 |
Выпущенная версия. Последняя стабильная версия. |
2.x |
3.exp |
Экспериментальная версия. |
Внимание! Соглашение об уровне обслуживания Google Maps APIs Premium Plan не действует в отношении экспериментальной версии. Для применения Соглашения об уровне обслуживания в приложениях должна использоваться текущая выпущенная или зафиксированная версия Google Maps APIs Premium Plan.
Введение пространства имен google.maps
Наиболее заметное изменение Google Maps JavaScript API v3 – добавление пространства имен google.maps
. По умолчанию API v2 помещает все объекты в пространство имен Global, что может привести к возникновению конфликтов имен. В версии v3 все объекты располагаются в пространстве имен google.maps
.
При переносе приложения на версию v3 необходимо изменить программный код для использования нового пространства имен. К сожалению, простая операция поиска и замены "G" на "google.maps." поможет не полностью, но будет полезной при проверке кода. Ниже приведены несколько примеров эквивалентных классов в версиях v2 и v3.
v2 |
v3 |
GMap2 |
google.maps.Map |
GLatLng |
google.maps.LatLng |
GInfoWindow |
google.maps.InfoWindow |
GMapOptions |
google.map.MapOptions |
G_API_VERSION |
google.maps.version |
GPolyStyleOptions |
google.maps.PolygonOptions или google.maps.PolylineOptions |
Удаление устаревшего кода
Функции Google Maps JavaScript API v3 во многом совпадают с функциями v2, однако некоторые классы больше не поддерживаются. В рамках миграции нужно заменить эти классы служебными библиотеками сторонних разработчиков или удалить эти ссылки из вашего кода. Существует множество отличных библиотек JavaScript, предоставляющих те же функции, например, Closure или jQuery.
У следующих классов нет аналогов в Google Maps JavaScript API v3:
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
Сравнение кода
Давайте сравним два простых приложения, написанных с помощью API v2 и v3.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY&sensor=false"
type="text/javascript"></script>
<style type="text/css">
html, body, #map { height: 100%; margin: 0; }
</style>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<style type="text/css">
html, body, #map { height: 100%; margin: 0; }
</style>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Как видите, между двумя приложениями есть некоторые отличия. Некоторые заметные изменения:
- Изменился адрес загрузки API.
- Методы
GBrowserIsCompatible()
и GUnload()
больше не требуются в v3 и были удалены из API.
- Объект
GMap2
заменен на google.maps.Map
в качестве центрального объекта API.
- Свойства теперь загружаются через классы Options. В вышеуказанном примере мы устанавливаем три свойства, требующиеся для загрузки карты –
center
, zoom
и mapTypeId
– с помощью встроенного объекта MapOptions
.
- Пользовательский интерфейс по умолчанию включен в версии v3. Вы можете отключить его, установив для свойства
disableDefaultUI
объекта MapOptions
значение true.
Сводная информация
Сейчас вы немного узнали о некоторых основных аспектах миграции с версии Google Maps JavaScript API v2 на версию Google Maps JavaScript API v3. Вам может потребоваться намного больше информации, но это зависит от вашего приложения. В следующих разделах мы добавили инструкции по миграции для определенных случаев, с которыми вы можете столкнуться. Кроме того, имеется ряд ресурсов, которые могут оказаться вам полезными в процессе обновления.
Если у вас возникнут проблемы или вопросы по этой статье, используйте ссылку Send Feedback в верхней части этой страницы.
В этом разделе содержится подробное сравнение наиболее популярных функций Google Maps JavaScript API версий 2 и 3. С каждым разделом справочника можно ознакомиться отдельно. Мы рекомендуем не читать справочник целиком, а использовать эти материалы для решения конкретных задач во время миграции.
- События – регистрация и обработка событий.
- Элементы управления – манипуляции с навигационными элементами управления, которые отображаются на карте.
- Наложения – добавление и редактирование объектов на карте.
- Типы карт – фрагменты, составляющие основную карту.
- Слои – добавление и редактирование групп контента, например, слоев KML или дорожной обстановки.
- Службы – работа со службами Geocoding, Directions или Street View.
События
Модель событий Google Maps JavaScript API v3 похожа на модель, используемую в v2, хотя в ней произошло много внутренних изменений.
Новое событие для поддержки MVC
API v3 добавляет новый тип события для отражения изменений состояния MVC. Теперь существует два типа событий:
- Пользовательские события (например, события нажатия кнопок мыши), которые передаются из DOM в Google Maps JavaScript API. Это отдельные события, которые отличаются от стандартных событий DOM.
- Уведомления об изменениях состояния MVC отражают изменения объектов API-интерфейса Google Maps и в их названиях используется обозначение
property_changed
.
Каждый объект Google Maps API экспортирует определенное количество именованных событий. Приложения, для которых важны определенные события, должны регистрировать блоки прослушивания событий и запускать код при получении этих событий. Механизм на обработки событий одинаков в Google Maps JavaScript API v2 и v3, однако пространство имен изменилось с GEvent
на google.maps.event
:
GEvent.addListener(map, 'click', function() {
alert('You clicked the map.');
});
google.maps.event.addListener(map, 'click', function() {
alert('You clicked the map.');
});
Удаление блоков прослушивания событий
Для повышения производительности рекомендуется удалять блок прослушивания событий, если он больше не требуется. Удаление блока прослушивания событий работает в v2 и v3 одинаково:
- При создании блока прослушивания событий возвращается непрозрачный объект (GEventListener в v2, MapsEventListener в v3).
- Если вы хотите удалить блок прослушивания событий, передайте этот объект в метод
removeListener()
(GEvent.removeListener()
в v2 или google.maps.event.removeListener()
в v3) для удаления блока прослушивания событий.
Отслеживание событий DOM
Если вы хотите получить данные о событиях DOM (объектной модели документов) и отреагировать на них, в v3 предоставляется статический метод google.maps.event.addDomListener()
, эквивалентный методу GEvent.addDomListener()
в v2.
Использование переданных аргументов в событиях
События пользовательского интерфейса часто передают аргумент события, доступный для блока прослушивания событий. Большинство аргументов событий в v3 были упрощены для большего соответствия объектам API. (Подробную информацию можно найти в справочнике по v3).
В блоках прослушивания v3 отсутствует аргумент overlay
. Если зарегистрировать событие click
на карте v3, обратный вызов произойдет только тогда, когда пользователь нажмет базовую карту. Вы можете зарегистрировать дополнительные обратные вызовы на доступных для нажатия наложениях, если вам нужно реагировать на эти нажатия.
// Passes an overlay argument when clicking on a map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
GEvent.addListener(map,'click', function(overlay, latlng) {
if (latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
}
});
// Passes only an event argument
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
Элементы управления
Элементы управления пользовательского интерфейса, отображаемые в Google Maps JavaScript API, позволяют пользователям взаимодействовать с вашей картой. Вы можете использовать API для настройки вида этих элементов управления.
Изменения типов элементов управления
В API v3 внесены некоторые изменения типов элементов управления
.
- API v3 поддерживает дополнительные типы карт, в том числе карты местности и возможность добавлять собственные типы карт.
- Иерархический элемент управления
GHierarchicalMapTypeControl
из v2 больше не доступен. Аналогичного эффекта можно добиться, используя элемент управления google.maps.MapTypeControlStyle.HORIZONTAL_BAR
.
- Горизонтальный макет, предоставляемый в v2 элементом управления
GMapTypeControl
, недоступен в v3.
Добавление элементов управления на карту
В Google Maps JavaScript API v2 элементы управления можно было добавлять на карту с помощью метода addControl()
объекта карты. В v3 вместо непосредственного обращения к элементам управления или их изменения нужно изменять связанный объект MapOptions
. В примере ниже показано, как настроить карту для добавления следующих элементов управления:
- кнопки, позволяющие пользователю переключаться между доступными типами карт;
- масштаб карты.
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Позиционирование элементов управления на карте
Позиционирование элементов управления значительно изменилось в версии v3. В v2 метод addControl()
использует необязательный второй параметр, позволяющий указать позицию элемента управления относительно углов карты.
В v3 позиция элемента управления задается с помощью свойства position
в параметрах элемента управления. Позиции этих элементов управления не являются абсолютными. API интеллектуально распределяет элементы управления на экране так, чтобы они не перекрывали существующие элементы карты с учетом имеющихся ограничений (например, размера карты). Это обеспечивает совместимость стандартных и ваших элементов управления. Дополнительную информацию см. на странице Позиционирование элементов управления в v3.
Следующий код изменяет положение элементов управления из вышеприведенных примеров:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add map type control
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
// Add scale
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Пользовательские элементы управления
Google Maps JavaScript API позволяет создавать собственные навигационные элементы управления. Для настройки элементов управления в API v2 нужно создать подкласс класса GControl
и определить обработчики методов initialize()
и getDefaultPosition()
. В v3 нет эквивалента класса GControl
. Элементы управления просто представлены как элементы DOM. Чтобы добавить собственный элемент управления в API v3, нужно просто создать структуру DOM для элемента управления в конструкторе как дочерний элемент Node
(например, элемент <div>
) и добавить блоки прослушивания событий для обработки любых событий DOM. Загрузите Node
в массив controls[position]
карты, чтобы добавить на нее экземпляр собственного элемента управления.
Следующие примеры кода демонстрируют добавление на карту собственного элемента управления, используя реализацию класса HomeControl
, которая соответствует указанным выше требованиям к интерфейсу (дополнительная информация приведена в документации по пользовательским элементам управления).
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
Наложения
Наложения соответствуют объектам, которые "добавляются" на карту для обозначения точек, линий, областей и наборов объектов.
Добавление и удаление наложений
В v2 и v3 наложения представляют одни и те же типы объектов, но обрабатываются по-разному.
В API v2 наложения добавлялись на карту и удалялись с карты с помощью методов addOverlay()
и removeOverlay()
объекта GMap2
. В v3 карта для наложения назначается с помощью свойства map
соответствующего класса параметров наложения. Наложения можно добавлять или удалять напрямую. Для этого нужно вызвать метод setMap()
объекта наложения и указать нужную карту. При установке для свойства карты значения null
наложение удаляется.
Метод clearOverlays()
в v3 отсутствует. Для управления набором наложений нужно создать массив для их хранения. Используя этот массив, можно вызывать метод setMap()
для каждого наложения в массиве (передавая значение null
, если вам нужно их удалить).
Перетаскиваемые маркеры
По умолчанию маркеры реагируют на нажатия, но не поддерживают операцию перетаскивания. В следующих двух примерах добавляется маркер, который можно перетаскивать:
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
Значки
Вы можете определить собственный значок для отображения вместо маркера по умолчанию. Чтобы использовать в v2 собственное изображение, вы можете создать экземпляр GIcon
из типа G_DEFAULT_ICON
и изменить его. Если размер вашего изображения больше или меньше размера значка по умолчанию, вы должны указать его в экземпляре GSize
. В API v3 этот процесс немного проще. Вам нужно просто указать для свойства icon
маркера URL-адрес собственного изображения, и API автоматически установит размер значка.
В Google Maps JavaScript API также поддерживаются сложные значки. Сложный значок может содержать несколько фрагментов, сложные фигуры или задавать определенный порядок показа изображений относительно других наложений. Чтобы добавить фигуру к маркеру в v2, нужно указать дополнительное свойство в каждом экземпляре GIcon
и передать его конструктору GMarker
в качестве параметра. В v3 для указанных таким образом значков в качестве значений свойств icon
следует устанавливать объекты типа Icon
. Тени маркеров не поддерживаются в v3.
В следующих примерах на пляже Бонди Бич в Австралии отображается флажок пляжа, причем прозрачная часть значка не реагирует на нажатия:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
Ломаные линии
Ломаная линия состоит из массива точек с координатами LatLng
и набора отрезков, соединяющих эти точки в упорядоченной последовательности. Объект Polyline
в v3 создается и отображается аналогично объекту GPolyline
в v2. В следующих примерах показано создание полупрозрачной геодезической ломаной линии шириной в 3 пикселя, проходящей из Цюриха в Сидней через Сингапур:
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
Кодированные ломаные линии
В v3 не поддерживается создание объектов Polyline
непосредственно из кодированных ломаных линий. Вместо этого библиотека Geometry предоставляет методы кодирования и декодирования ломаных линий. Дополнительную информацию о загрузке этой библиотеки см. в документе Библиотеки для Maps API v3.
В примерах ниже рисуется та же самая кодированная ломаная линия. Код v3 использует метод decodePath()
из пространства имен google.maps.geometry.encoding
.
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
Многоугольники
Многоугольник определяет область внутри замкнутого контура. Подобно объектам Polyline
, объекты Polygon
состоят из набора точек в упорядоченной последовательности. Класс Polygon
в v3 во многом похож на класс GPolygon
в v2, однако в нем не нужно указывать начальную вершину в конце пути для замыкания контура. API v3 автоматически замыкает любые многоугольники, рисуя линию, соединяющую последнюю пару координат с первой. В следующих фрагментах кода показано создание многоугольника, соответствующего Бермудскому треугольнику.
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Формы, редактируемые пользователем
Пользователям можно разрешить изменять ломаные линии и многоугольники. Следующие фрагменты кода являются эквивалентными:
map.addOverlay(polyline);
polyline.enableEditing();
polyline.setMap(map);
polyline.setEditable(true);
Информацию о дополнительных возможностях рисования можно найти в описании библиотеки Drawing в документации по v3.
Информационные окна
Объект InfoWindow
отображает контент в плавающем окне поверх карты. Между информационными окнами в v2 и v3 есть ряд важных отличий:
- API v2 поддерживает только один объект
GInfoWindow
на каждой карте, а API v3 поддерживает одновременное отображение нескольких объектов InfoWindow
на каждой карте.
- Объект
InfoWindow
в v3 остается открытым при нажатии карты. Объект GInfoWindow
в v2 автоматически закрывается при нажатии карты. Вы можете эмулировать поведение v2, добавив блок прослушивания click
к объекту Map
.
- API v3 не имеет встроенной поддержки вкладок для
InfoWindow
.
Наземные наложения
Чтобы поместить на карте изображение, нужно использовать объект GroundOverlay
. Конструкторы объектов GroundOverlay
в v2 и в v3 практически одинаковые. В качестве параметров в них указываются URL-адрес и границы изображения.
В следующем примере на карту накладывается старинная карта Ньюарка в штате Нью-Джерси:
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
Типы карт
Доступные в v2 и v3 типы карт немного различаются, однако в обоих версиях API доступны все базовые типы карт. По умолчанию в v2 используются стандартные "окрашенные" фрагменты дорожной карты. Однако в v3 при создании объекта google.maps.Map
нужно указать определенный тип карты.
Общие типы карт
В v2 и v3 имеется четыре базовых типа карт:
MapTypeId.ROADMAP
(заменяет G_NORMAL_MAP
) – отображает дорожную карту.
MapTypeId.SATELLITE
(заменяет G_SATELLITE_MAP
) – отображает карту из спутниковых снимков Google Earth.
MapTypeId.HYBRID
(заменяет G_HYBRID_MAP
) – отображает сочетание обычной и спутниковой карты.
MapTypeId.TERRAIN
(заменяет G_PHYSICAL_MAP
) – отображает физическую карту на основе данных о ландшафте.
Ниже приведены примеры настроек режима карты местности в v2 и v3:
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
В Google Maps JavaScript API v3 также внесены некоторые изменения менее распространенных типов карт:
- Фрагменты карт Google Map Maker доступны в Google Maps и Google Maps JavaScript API для большинства стран, поддерживаемых Map Maker.
- Фрагменты карт небесных тел, кроме Земли, недоступны в API v3 как типы карт, но к ним можно получить доступ как к пользовательским типам карт, как показано в этой демонстрации.
- В v3 нет специального типа карт, заменяющего тип
G_SATELLITE_3D_MAP
из v2. Вместо этого вы можете интегрировать в карты v3 подключаемый модуль Google Earth, используя эту библиотеку.
Служба Maximum Zoom Imagery
Спутниковые снимки не всегда доступны с высокими уровнями масштабирования. Если вы хотите узнать максимальный доступный уровень увеличения до установки масштаба, используйте класс google.maps.MaxZoomService
. Этот класс заменяет метод GMapType.getMaxZoomAtLatLng()
из v2.
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);
map.getCurrentMapType().getMaxZoomAtLatLng(point,
function(response) {
if (response.status) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
myLatlng,
function(response) {
if (response.status == google.maps.MaxZoomStatus.OK) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
Изображения перспективной аэрофотосъемки
Элементы управления при активации изображений аэрофотосъемки в v3 похожи на элемент управления GLargeZoomControl3D
в v2. Также добавлен дополнительный внедренный элемент управления Rotate для вращения изображения в поддерживаемых направлениях.
На этой карте вы можете отслеживать города, для которых в настоящее время доступны изображения под углом 45°. Если изображения под углом 45° доступны, к кнопке Maps API Satellite добавляется вложенное меню.
Слои
Слои – это объекты на карте, состоящие из одного или нескольких наложений. С ними можно совершать операции как с одним элементом, и обычно они представляют собой наборы объектов.
Поддерживаемые слои
API v3 предоставляет доступ к нескольким разным слоям. Эти слои пересекаются с классом v2 GLayer
в следующих областях:
-
Объект
KmlLayer
выполняет прорисовку элементов KML и GeoRSS в виде наложений v3, предоставляя эквивалент слоя GeoXml
в v2.
- Объект
TrafficLayer
выполняет прорисовку слоя дорожной обстановки, аналогично наложению GTrafficOverlay
в v2.
Эти слои отличаются от слоев v2. Отличия описаны ниже. Их можно добавить на карту посредством вызова метода setMap()
и передачи в него объекта Map
, на котором нужно отобразить слой.
Дополнительную информацию о поддерживаемых слоях см. в документации по слоям.
Слои KML и GeoRSS
Google Maps JavaScript API поддерживает форматы данных KML и GeoRSS для отображения географической информации. Если вы хотите включить карту в файлы KML или GeoRSS, доступ к ним должен быть открытым. В v3 эти форматы данных отображаются с использованием экземпляра класса KmlLayer
, заменяющего объект GGeoXml
в v2.
API v3 обеспечивает дополнительную гибкость при прорисовке KML, позволяя запрещать показ информационных окон и изменять реакцию на нажатие. Более подробную информацию можно найти в документации v3 по слоям KML и GeoRSS.
При прорисовке объектов KmlLayer
применяются ограничения по размеру и сложности. Подробную информацию можно найти в документации по KmlLayer.
В следующих примерах приведено сравнение способов загрузки файла KML.
geoXml = new GGeoXml(
'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
Слой дорожной обстановки
API v3 позволяет добавлять на карты информацию о дорожной обстановке в реальном времени (если поддерживается) с помощью объекта TrafficLayer
. Информация о дорожной обстановке предоставляется на момент отправки запроса. В этих примерах показана информация о дорожной обстановке для Лос-Анжелеса:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
В отличие от v2, в v3 нет параметров для конструктора TrafficLayer
. Дорожно-транспортные происшествия в v3 не поддерживаются.
Службы
Служба Geocoding
Google Maps JavaScript API предоставляет объект geocoder
для динамического геокодирования адресов, вводимых пользователем. Информацию о геокодировании постоянных известных адресов можно найти в документации по Google Maps Geocoding API.
Возможности Google Maps Geocoding API были значительно усовершенствованы и расширены, в нем были добавлены новые функции и изменены способы отображения данных.
GClientGeocoder
в API v2 предоставлял два разных метода прямого и обратного геокодирования, а также дополнительные методы, влияющие на выполнение геокодирования. В отличие от него объект Geocoder
в v3 предоставляет только метод geocode()
, который использует литерал объекта, содержащий условия ввода (в виде объекта запросов геокодирования) и метод обратного вызова. В зависимости от того, содержится ли в запросе текстовый атрибут address
или объект LatLng
, Google Maps Geocoding API возвращает ответ с прямым или обратным геокодированием. Вы можете повлиять на выполнение геокодирования, используя следующие поля в запросе геокодирования:
- Добавление текстового атрибута
address
активирует прямое геокодирование, что эквивалентно вызову метода getLatLng()
.
- Добавление объекта
latLng
активирует обратное геокодирование, что эквивалентно вызову метода getLocations()
.
- Добавление атрибута
bounds
активирует предпочтение области просмотра, что эквивалентно вызову метода setViewport()
.
- Добавление атрибута
region
активирует предпочтение кода региона, что эквивалентно вызову метода setBaseCountryCode()
.
Ответы службы Geocoding в v3 значительно отличаются от ответов в v2. API v3 заменяет многоуровневую структуру, используемую v2, более плоской структурой, которую проще анализировать. Кроме того ответы v3 более подробны. Каждый результат содержит несколько компонентов адреса, что помогает лучше понять разрешение каждого результата.
В следующем примере кода берется текстовый адрес и отображается первый результат его геокодирования:
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
result[0].geometry.location_type.toLowerCase() +
'</em> to <em>' +
result[0].formatted_address + '</em> of types <em>' +
result[0].types.join('</em>, <em>').replace(/_/, ' ') +
'</em> at <tt>' + result[0].geometry.location +
'</tt></p>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
Служба Directions
Google Maps JavaScript API v3 заменяет класс GDirections
из v2 классом DirectionsService
для расчета маршрутов.
Метод route()
в v3 заменяет методы load()
и loadFromWaypoints()
из API v2. Этот метод получает один литерал объекта DirectionsRequest
, содержащий условия ввода и метод обратного вызова для выполнения после получения ответа. В этом литерале объекта можно указать параметры аналогично литералу объекта GDirectionsOptions
в v2.
В Google Maps JavaScript API v3 задача отправки запросов маршрутов отделена от задачи прорисовки запросов, которая теперь обрабатывается с помощью класса DirectionsRenderer
. Вы можете привязать объект DirectionsRenderer
к любой карте или любому объекту DirectionsResult
, используя его методы setMap()
и setDirections()
. Поскольку средство прорисовки представляет собой объект MVCObject
, оно обнаруживает любые изменения своих свойств и обновляет карту при изменении соответствующих маршрутов.
Следующий пример кода демонстрирует запрос пеших маршрутов по пешеходным дорожкам от указанного адреса в определенное место. Обратите внимание, что только v3 может предоставить пешие маршруты по пешеходным дорожкам в Дублинском зоопарке.
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setPanel(document.getElementById("route"));
directionsDisplay.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
Street View
Google Street View обеспечивает интерактивный круговой обзор из указанных мест в области покрытия. Версия API v3 обеспечивает встроенную поддержку службы Street View в браузере, тогда как версия v2 требовала установки подключаемого модуля Flash® для показа изображений Street View.
Изображения Street View поддерживаются путем использования объекта StreetViewPanorama
в v3 или объекта GStreetviewPanorama
в v2. Эти классы имеют разные интерфейсы, но играют одну и ту же роль: они связывают контейнер div
с изображениями Street View и позволяют указать местоположение и точку обзора панорамы Street View.
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
Прямой доступ к данным Street View может осуществляться через объект StreetViewService
в v3 или через аналогичный объект GStreetviewClient
в v2. Оба этих объекта предоставляют похожие интерфейсы для получения или проверки доступности данных Street View, позволяя выполнять поиск по местоположению или по идентификатору панорамы.
В v3 служба Street View включена по умолчанию. Карта отображается с элементом управления Street View Pegman, и API повторно использует контейнер div карты для отображения панорам StreetView. В следующем примере кода показано, как эмулировать поведение v2, выделяя панорамы Street View в отдельный контейнер div.
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}