Профессиональный пакет API Карт Google
Те же замечательные карты плюс SLA, поддержка и контроль рекламы
API Карт Google –·это регулярно расширяемый API, в который добавляются новые возможности и функции, которые сначала реализуются на сайте maps.google.com. В этом разделе и описаны данные службы. Примечание. Поскольку определение службы несколько туманно, этот раздел является своего рода универсальным. Фактически, он содержит описания различных удобных функций, не вошедших в другие разделы.
API Карт Google экспортирует промышленный метод создания объектов XmlHttpRequest(), не зависящих от типа браузера и работающих в последних версиях Internet Explorer, Firefox и Safari. Так же как и все объекты XmlHttpRequest, все полученные файлы должны находиться в вашем локальном домене. В следующем примере выполняется загрузка файла myfile.txt и отображается его содержание в функции JavaScript alert():
| 
var request = GXmlHttp.create();
request.open("GET", "myfile.txt", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
alert(request.responseText);
}
}
request.send(null);
API также экспортирует более простой метод GDownloadUrl() для обычных HTTP-запросов GET, который устраняет необходимость проверки свойства XmlHttpRequest() объекта readyState. Приведенный выше пример можно переписать с использованием метода GDownloadUrl() следующим образом:
GDownloadUrl("myfile.txt", function(data, responseCode) {
alert(data);
});
Для анализа XML-документа можно использовать статический метод GXml.parse(), для которого в качестве единственного аргумента указывается XML-строка. Этот метод совместим с большинством современных браузеров, за исключением тех, которые не поддерживают анализ XML собственными средствами.
В приведенном примере выполняется загрузка статического файла ("data.xml"), содержащего список значений широты и долготы в формате XML, с использованием метода GDownloadUrl. По завершении загрузки производится анализ XML с помощью GXml и в XML-документе в каждой точке создается маркер.
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// </markers>
GDownloadUrl("data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));
}
});
Просмотреть пример (xhr-requests.html). Данный пример использует внешний XML-файл данных data.xml.
Дополнительные сведения см. в справочных материалах по классам GXmlHttp и GXml.
Геокодирование – процесс преобразования адресов·(таких как "1600 Amphitheatre Parkway, Mountain View, CA") в географические координаты (таких как широта 37.423021 и долгота -122.083739), которые можно использовать для размещения маркеров или расположения карты. Доступ к службе геокодирования в API Карт Google можно получить напрямую путем запроса HTTP или с помощью объекта GClientGeocoder.
API Карт Google предоставляет клиентский геокодер для динамического геокодирования адресов, вводимых пользователем. Если, вместо этого, требуется геокодирование статических, известных адресов, обращайтесь к документации Службы геокодирования.
Доступ к Службе геокодирования Карт Google можно получить с помощью объекта GClientGeocoder. Для преобразования строки адреса в объект GClientGeocoder.getLatLng() используется метод GLatLng. В качестве параметров данного метода используются преобразуемая строка адреса и функция обратного вызова, выполняемая при получении адреса. Эта функция необходима, поскольку при геокодировании отправляется запрос серверам Google, который может занять некоторое время.
В данном примере выполняется геокодирование адреса, в данную точку добавляется маркер и открывается информационное окно с адресом. Обратите внимание, что функция обратного вызова передается в виде литерала.
var map = new GMap2(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
Просмотреть пример (geocoding-simple.html)
Можно также изменить геокодировщик API Карт, чтобы результаты выводились в данном окне просмотра (задается в виде ограничивающего прямоугольника типа GLatLngBounds). Для этого служит метод GClientGeocoder.setViewport(). С помощью метода GClientGeocoder.setBaseCountryCode() можно задать вывод результатов, относящихся к конкретному домену (стране). Запросы на геокодирование можно отправлять для любого домена, в котором главное приложение Карт Google поддерживает геокодирование. Например, поиск объекта "Toledo" даст различные результаты для домена Испании (http://maps.google.es), указанного кодом страны es, и для домена по умолчанию в США (http://maps.google.com).
Если необходимо обратиться к структурированной информации об адресе, объект GClientGeocoder предоставляет метод getLocations(), возвращающий объект JSON, который состоит из следующих сведений:
Statusrequest – тип запроса. В этом случае, он всегда geocode.code – Код ответа (аналогичен кодам состояния HTTP). Указывает, был ли запрос успешным или нет. См. полный список кодов состояния.Placemark – если геокодер обнаруживает несколько совпадений, он может вернуть несколько меток.address – версия адреса с правильным форматированием и применением заглавных букв.AddressDetails –·адрес в формате xAL Расширяемый язык адресов, международный стандарт форматов адресов.Accuracy – атрибут, обозначающий точность геокодирования заданного адреса. См. список возможных значений.Point – точка в трехмерном пространстве.coordinates – долгота, широта и высота адреса. В данном случае высота всегда равна 0.В этом примере показан объект JSON, возвращенный геокодировщиком для адреса штаб-квартиры Google:
{
"name": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
"Status": {
"code": 200,
"request": "geocode"
},
"Placemark": [
{
"address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
"AddressDetails": {
"Country": {
"CountryNameCode": "US",
"AdministrativeArea": {
"AdministrativeAreaName": "CA",
"SubAdministrativeArea": {
"SubAdministrativeAreaName": "Santa Clara",
"Locality": {
"LocalityName": "Mountain View",
"Thoroughfare": {
"ThoroughfareName": "1600 Amphitheatre Pkwy"
},
"PostalCode": {
"PostalCodeNumber": "94043"
}
}
}
}
},
"Accuracy": 8
},
"Point": {
"coordinates": [-122.083739, 37.423021, 0]
}
}
]
}
В этом примере метод getLocations() служит для геокодирования адресов, извлекая из объекта JSON версию адреса с правильным форматированием и двухбуквенный код страны, которые затем отображаются в информационном окне.
var map;
var geocoder;
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("\"" + address + "\" not found");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
Просмотреть пример (geocoding-extraction.html)
Термин геокодирование обычно обозначает преобразование обычного адреса в точку на карте. Обратный процесс, преобразование точки на карте в читаемый для пользователя адрес, известен как обратное геокодирование.
Метод GClientGeocoder.getLocations() поддерживает как обычное, так и обратное геокодирование. Если передать этому методу объект GLatLng, вместо адресаString, геокодер выполнит обратный поиск и возвратит структурированный объект JSON, содержащий ближайший адрес. Отметьте, что ближайшее место со своим адресом может находиться на некотором расстоянии от значений широты и долготы, указанных в запросе, если предоставленный GLatLng не соответствует в точности ни одному из адресов.
Примечание. Обратное геокодирование не является точной наукой. Геокодер попытается найти ближайший адрес, к которому можно отнести географическую точку, в определенных пределах. Если такового не будет найдено, он обычно возвращает код состояния G_GEO_UNKNOWN_ADDRESS (602).
var map;
var geocoder;
var address;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40.730885,-73.997383), 15);
map.addControl(new GLargeMapControl);
GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();
}
function getAddress(overlay, latlng) {
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
function showAddress(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Status Code:" + response.Status.code);
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(
'<b>orig latlng:</b>' + response.name + '<br/>' +
'<b>latlng:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
'<b>Status Code:</b>' + response.Status.code + '<br>' +
'<b>Status Request:</b>' + response.Status.request + '<br>' +
'<b>Address:</b>' + place.address + '<br>' +
'<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
Просмотреть пример (geocoding-reverse.html)
GClientGeocoder по умолчанию предусматривает клиентский кэш. В кэше хранятся ответы геокодера, что ускоряет отклики в случае геокодирования адресов. Можно отключить кэширование, передав значение null методу setCache() объекта GClientGeocoder. Однако рекомендуется не отключать кэширование, поскольку оно повышает быстродействие. Чтобы изменить кэш, используемый объектом GClientGeocoder, вызовите метод setCache() и передайте ему новый кэш. Чтобы удалить содержание текущего кэша, вызовите метод reset() для геокодера или для кэша напрямую.
Разработчикам рекомендуется создавать собственные клиентские кэши. В приведенном примере мы формируем кэш, содержащий заранее рассчитанные ответы геокодировщика для шести столиц стран, где поддерживается API геокодирования. Сначала создается массив ответов геокодера. Затем строится дополнительный кэш, который расширяет стандартный GeocodeCache. Определив кэш, мы вызываем метод setCache(). Строгих требований к объектам, хранящимся в кэше, нет, поэтому можно хранить там другую информацию (например о численности населения).
// Builds an array of geocode responses for the 6 capitals
var city = [
{
name: "Washington, DC",
Status: {
code: 200,
request: "geocode"
},
Placemark: [
{
address: "Washington, DC, USA",
population: "0.563M",
AddressDetails: {
Country: {
CountryNameCode: "US",
AdministrativeArea: {
AdministrativeAreaName: "DC",
Locality: {
LocalityName: "Washington"
}
}
},
Accuracy: 4
},
Point: {
coordinates: [-77.036667, 38.895000, 0]
}
}
]
},
... // etc., and so on for other cities
];
var map;
var geocoder;
// CapitalCitiesCache is a custom cache that extends the standard GeocodeCache.
// We call apply(this) to invoke the parent's class constructor.
function CapitalCitiesCache() {
GGeocodeCache.apply(this);
}
// Assigns an instance of the parent class as a prototype of the
// child class, to make sure that all methods defined on the parent
// class can be directly invoked on the child class.
CapitalCitiesCache.prototype = new GGeocodeCache();
// Override the reset method to populate the empty cache with
// information from our array of geocode responses for capitals.
CapitalCitiesCache.prototype.reset = function() {
GGeocodeCache.prototype.reset.call(this);
for (var i in city) {
this.put(city[i].name, city[i]);
}
}
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.441944, -122.141944), 6);
// Here we set the cache to use the UsCitiesCache custom cache.
geocoder = new GClientGeocoder();
geocoder.setCache(new CapitalCitiesCache());
Просмотреть пример (geocoding-cache.html)
Google также предоставляет услуги геокодирования напрямую через HTTP. Служба геокодирования отличается от JavaScript API Карт Google. Использовать службу HTTP для динамического получения запросов на геокодирование в реальном времени не рекомендуется; вместо этого используйте клиентский геокодер JavaScript, описанный в данной главе. Однако, геокодер HTTP полезен при заполнении статических наборов данных, устранении неполадок и в случаях, когда объект JavaScript GClientGeocoder недоступен.
Дополнительные сведения см. в разделе Служба геокодирования HTTP.
Для использования панорамного объекта службы Просмотр улиц требуется поддержка подключаемого модуля Flash в браузере клиента.
Просмотр улиц Google обеспечивает панорамный 360-градусный обзор улиц на всей области покрытия Карт Google. Пример изображения Просмотра улиц показан ниже.
Для отображения этих интерактивных снимков, Просмотр улиц Google использует подключаемый модуль Flash®, который поддерживается большинством браузеров. API Карт Google теперь предоставляет службу Просмотр улиц для получения изображений, используемых в Просмотре улиц Карт Google, и управления ими!
GStreetviewPanoramaДля поддержки изображений Просмотра улиц используется объект GStreetviewPanorama, который обеспечивает API-интерфейс для средства просмотра Street View Flash®. Чтобы внедрить Просмотр улиц в свое приложение API Карт, выполните следующие действия:
<div>) для средства просмотра Street View Flash®.GStreetviewPanorama и поместите его в контейнер.603.Для объекта GStreetviewPanorama требуется элемент контейнера в конструкторе. Вы также можете при желании задать его координаты с помощью параметра GStreetviewPanoramaOptions. Можно вызвать метод setLocationAndPOV() для объекта после его создания, чтобы изменить его координаты и точку обзора.
Примечание. Хотя функции Просмотра улиц и разработаны для использования в сочетании с картой, это не является обязательным. Вполне возможно использование объекта Просмотра улиц отдельно от карты.
Дополнительные сведения о контейнерах, задании координат и точках обзора приведены ниже.
Для средства просмотра Street View Flash необходим DOM-узел контейнера, в котором отображается его содержание. Часто это элемент <div>. Для получения оптимальных панорамных изображений рекомендуется минимальный размер 200х200 пикселей. Крупномасштабные средства просмотра не рекомендуется использовать, поскольку они потребляют слишком много памяти и могут отрицательно повлиять на производительность браузера.
Обязательный параметр GStreetviewPanorama конструктора container определяет начальный элемент контейнера для отображения средства просмотра Street View Flash. Вы можете скрыть (метод hide()) объект GStreetviewPanorama, чтобы временно отключить его отображение, или показать (метод show()) объект, чтобы снова включить отображение средства просмотра.
Если в какой-либо момент потребуется сменить контейнер для средства просмотра Street View Flash, вызовите его метод setContainer(), передав новый элемент, к которому он должен быть присоединен. При изменении размера контейнера можно вызвать метод GStreetviewPanorama объекта checkResize(), чтобы изменить его размеры в соответствии с новыми параметрами.
Чтобы полностью удалить средство просмотра Street View Flash из DOM и освободить память, вызовите метод remove() объекта. Если требуется удалить элемент контейнера из DOM, то вызвать данный метод необходимо, иначе возможны утечки памяти в браузере клиента.
Изображение Просмотра улиц включает как координаты (соответствующие параметру GLatLng), так и определенную ориентацию (GPov). Вместе эти два параметра определяют вид изображения. Оба параметра можно задать при создании объекта Просмотра улиц с использованием необязательного параметра GStreetviewPanoramaOptions.
Список городов, которые на данный момент поддерживаются службой Просмотр улиц, можно посмотреть в справочном центре Карт Google. Существуют три основных способа определить, поддерживает ли определенное местоположение данные Просмотра улиц:
GLatLng известного местоположения Просмотра улиц.GStreetviewOverlay и визуально изучить дорожную сеть. Улицы, поддерживающие Просмотр улиц, выделены на наложении голубым цветом. После этого можно воспользоваться событиями нажатия или логической схемой геокодирования для передачи поддерживаемых координат объектам GStreetviewPanorama.) (См. раздел Наложения в службе Просмотр улиц.)GStreetviewClient для запросов объектов Просмотра улиц, которым переданы параметры GLatLng. Объект GStreetviewClient поддерживает несколько типов запросов для поиска панорамных данных. См. раздел Клиентские запросы в службе Просмотр улиц.)Учтите, что последние два способа являются неточными: в этих случаях служба Street View не требует (и обычно не получает) точные значения широты и долготы, а лишь определяет, существуют ли панорамные данные "рядом" с указанным GLatLng.
В приведенном ниже примере с помощью параметра GStreetviewPanoramaOptions указаны начальные широта и долгота, которые будут использоваться в Просмотре улиц. Значение точки обзора не указано, что задает стандартный вид по направлению на север.
var fenwayPark = new GLatLng(42.345573,-71.098326);
panoramaOptions = { latlng:fenwayPark };
var myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
Просмотреть пример (streetview-simple.html)
Поскольку для службы Просмотр улиц необходима поддержка подключаемого модуля Flash®, ваш код должен проверять, доступен ли этот модуль для пользовательского браузера. С этой целью вы можете зарегистрировать в вашем приложении прослушиватель событий для события error на объекте GStreetviewPanorama. Событие error передает код ошибки, который можно оценить.
Пример кода, приведенный ниже, выполняет быструю проверку поддержки модуля Flash и выводит окно с предупреждением, если Flash не поддерживается.
var fenwayPark = new GLatLng(42.345573,-71.098326);
panoramaOptions = { latlng:fenwayPark };
myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
В службе Просмотр улиц координаты определяют позицию камеры, но не ее ориентацию. Для этой цели в литерале объекта GPov предусмотрены три свойства:
yaw определяет угол поворота вокруг позиции камеры в градусах относительно географического севера. Углы поворота отсчитываются по часовой стрелке (90 градусов соответствуют географическому востоку).pitch по умолчанию определяет угол отклонения "вверх" или "вниз" относительно начального угла наклона камеры по умолчанию, который часто (но не всегда) соответствует горизонтальной плоскости. (Например, для снимка с возвышенности, скорее всего, будет использоваться угол наклона по умолчанию, который в данном случае отличен от горизонтали.) Углы наклона выражаются отрицательными числами при отклонении вверх (–90 градусов вертикально вверх и под прямым углом к наклону по умолчанию) и положительными числами при отклонении вниз (+90 градусов вертикально вниз и под прямым углом к наклону по умолчанию).zoom определяет уровень масштабирования для данного вида (фактически ограничивая поле зрения). Различные местоположения Просмотра улиц могут представлять большие или меньшие уровни масштабирования.По умолчанию, все эти значения равны 0, определяя плоский горизонтальный вид прямо на север с максимально возможным полем обзора.
Как было сказано выше, вы можете задать координаты и параметр GPov для панорамного объекта при его создании с помощью параметра GStreetviewPanoramaOptions.
fenwayPark = new GLatLng(42.345573,-71.098326);
myPOV = {yaw:370.64659986187695,pitch:-20};
svOpts = {latlng:fenwayPark, pov:myPOV};
var myPano = new GStreetviewPanorama(document.getElementById("pano"), svOpts);
Можно настроить и координаты, и точку обзора с помощью метода setLocationAndPOV() после создания объекта GStreetviewPanorama. В следующем примере мы создали объект GStreetviewPanorama, а затем задали его координаты и точку обзора.
var myPano = new GStreetviewPanorama(document.getElementById("pano"));
fenwayPark = new GLatLng(42.345573,-71.098326);
myPOV = {yaw:370.64659986187695,pitch:-20};
myPano.setLocationAndPOV(fenwayPark, myPOV);
Просмотреть пример (streetview-object.html)
Простейший способ узнать, поддерживает ли данная дорога технологию Просмотра улиц – воспользоваться объектом GStreetviewOverlay. Создайте наложение этого типа и добавьте его на карту: дороги, для которых существуют данные службы Просмотр улиц, будут выделены на карте голубым.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
svOverlay = new GStreetviewOverlay();
map.addOverlay(svOverlay);
Просмотреть пример (streetview-layer.html)
Узнав, что данная географическая область поддерживает Просмотр улиц, можно добавить логическую схему, которая, в ответ на нажатия мышью по дорогам, (подходящим для работы Просмотре улиц) заполняет объект GStreetviewPanorama.
var myPano = new GStreetviewPanorama(document.getElementById("pano"));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(42.345573,-71.098326), 14);
svOverlay = new GStreetviewOverlay();
map.addOverlay(svOverlay);
GEvent.addListener(map,"click", function(overlay,latlng) {
myPano.setLocationAndPOV(latlng);
});
Просмотреть пример (streetview-click.html)
Зная, что определенное местоположение поддерживает Просмотр улиц, вы можете сохранить сведения о координатах и точке обзора, а затем разместить эти данные в самом объекте.
Определить, поддерживает ли Просмотр улиц определенную дорогу, путем визуального анализа объекта GStreetviewOverlay, не всегда возможно и не всегда желательно с точки зрения пользователя. Поэтому API предоставляет службу, которая программным способом запрашивает и получает данные Просмотра улиц. Эта служба реализуется с помощью объекта GStreetviewClient.
Объект GStreetviewClient выполняет поиск данных панорамы с помощью службы Просмотр улиц Google. Поскольку такой поиск осуществляется асинхронно, для методов этого класса после получения данных необходимо выполнить функции обратного вызова. Все функции обратного вызова получают значение null, если не было возвращено никакого значения. Поэтому рекомендуется проверить, выполняется ли это условие для ваших функций обратного вызова.
Метод GStreetviewClient объекта getNearestPanoramaLatLng() получает значение GLatLng для ближайшего панорамного изображения относительно данных координат (сами они передаются в виде параметра GLatLng).
Взамен этого оба метода getNearestPanorama() и getPanoramaById() получают объекты GStreetviewData, которые хранят метаданные о конкретном панорамном объекте. Эти данные описаны в следующем разделе.
Структура объекта GStreetviewData включает три свойства: location и copyright (содержат информацию о конкретном изображении на экране), а также links (предоставляет данные о соседних панорамных объектах). Структура этих свойств описана ниже:
# The location property uses the GStreetviewLocation object literal
location: {
latlng: GLatLng,
pov: {
yaw: String,
pitch: String,
zoom: String
},
description: String,
panoId: String
}
copyright: String
# The links property uses the GStreetviewLink object literal
links[]: {
yaw: String,
description: String,
panoId: String
}
(Полное описание литералов объектов GStreetviewLocation и GStreetviewLink можно найти в Справочных материалах по API Карт.)
Примечание. Свойство GStreetviewData.location не следует путать со свойством window.location. Если вы собираетесь получить данные из свойства location этого объекта, проверьте, был ли получен ответ от сервера Просмотра улиц (см. ниже). В противном случае для свойства location по умолчанию будет установлено значение window.location, что приведет к непредсказуемым результатам.
Если запрос к объекту GStreetviewClient выполнен успешно, то он передаст либо параметр GLatLng, либо объект GStreetviewData указанной функции обратного вызова. Поскольку получение данных службы Просмотр улиц выполняется асинхронно, то клиентский объект может не получить эти объекты данных. Поэтому ваш код не должен зависеть от их наличия. Вместо этого рекомендуется всегда проверять значение code, которое гарантированно возвращается в результате любого запроса. Фрагмент кода, приведенный ниже, иллюстрирует этот принцип.
panoClient = new GStreetviewClient();
panoClient.getPanoramaById(panoData.location.panoId, processReturnedData);
function processReturnedData(panoData) {
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
// Code to actually process the GStreetviewData object is contained here
}
Полный ответ, содержащий пример структуры объекта GStreetviewData, приведен ниже:
{
location: {
latlng: GLatLng("42.345566, -71.098354")
pov: {
yaw: "370.64659986187695"
pitch: "-20"
zoom: "1"
}
description: "Yawkey Way"
panoId: "-KNGDaZvSQjMqug7ISM_CA"
}
copyright: "© 2008 Google"
links:[ {
yaw: "0"
description: "Yawkey Way"
panoId: "S142iWXa_4Fi7L7d8HKhuQ"
},
{
yaw: "0"
description: "Yawkey Way"
panoId: "2vFI79AjOpHTAYJSCKquFg"
}
]
}
Пример приложения отображает начальный панорамный объект, получает его идентификатор, сохраняет связанный панорамный объект в возвращенном объекте GStreetviewData и выводит набор данных, соответствующий этому объекту Просмотра улиц. Каждый раз, когда пользователь нажимает кнопку "Далее", процесс повторяется, позволяя переходить между смежными панорамными объектами.
var map;
var myPano;
var panoClient;
var nextPanoId;
function initialize() {
var fenwayPark = new GLatLng(42.345573,-71.098326);
var fenwayPOV = {yaw:370.64659986187695,pitch:-20};
panoClient = new GStreetviewClient();
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(fenwayPark, 15);
GEvent.addListener(map, "click", function(overlay,latlng) {
panoClient.getNearestPanorama(latlng, showPanoData);
});
myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(fenwayPark, fenwayPOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(fenwayPark, showPanoData);
}
function showPanoData(panoData) {
if (panoData.code != 200) {
GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
return;
}
nextPanoId = panoData.links[[0[].panoId;
var displayString = [[
"Panorama ID: " + panoData.location.panoId,
"LatLng: " + panoData.location.latlng,
"Copyright: " + panoData.copyright,
"Description: " + panoData.location.description,
"Next Pano ID: " + panoData.links[[0[].panoId
[].join("
");
map.openInfoWindowHtml(panoData.location.latlng, displayString);
GLog.write('Viewer moved to' + panoData.location.latlng);
myPano.setLocationAndPOV(panoData.location.latlng);
}
function next() {
// Get the next panoId
// Note that this is not sophisticated. At the end of the block, it will get stuck
panoClient.getPanoramaById(nextPanoId, showPanoData);
}
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert("Error: Flash doesn't appear to be supported by your browser");
return;
}
}
Просмотреть пример (streetview-data.html)
API Карт Google позволяет разработчикам управлять экземпляром Google Планета Земля внутри их приложений API Карт. Слой карты Google Earth Планета Земля загружается с помощью отдельного GMapType, который выглядит и ведет себя как независимое приложение Google Планета Земля, позволяющее поворачивать перспективы, видеть углы наклона и просматривать информацию KML Google Планета Земля в браузере.
Примечание. На компьютере пользователя должен быть установлен плагин Google Планета Земля для использования этого GMapType Google Планета Земля. В настоящий момент плагин доступен для Microsoft Windows и Apple Mac OS X. Полные системные требования см. в Руководстве для разработчиков API Google Планета Земля.
Плагин Google Планета Земля также можно контролировать через его собственный API, отличный от API Карт Google. За полной информацией про использованию плагина и API Google Планета Земля, обратитесь к Руководству для разработчиков API Google Планета Земля.
Чтобы установить плагин, обратитесь к инструкциям по установке Google Планета Земля, или перейдите к любому веб-сайту, использующем плагин Google Планета Земля. Конечным пользователям вашего приложения, у которых не установлен этот плагин, будет, при переключении на Google Планета Земля, представлена ссылка для его загрузки GMapType. После успешной установки, плагин Google Планета Земля будет загружен автоматически (или, в некоторых браузерах, после перезагрузки страницы).
Чтобы добавить экземпляр Google Планета Земля к своей карте, просто добавьте к ней G_SATELLITE_3D_MAP с помощью GMap2.addMapType(). После этого можно будет либо отобразить данный тип карты напрямую, посредством GMap2.setMapType(), или позволить пользователю выбрать его в GMapTypeControl, добавив элемент управления типом карты посредством GMap2.addControl().
Нижеследующий код добавляет тип карты G_SATELLITE_3D_MAP и затем явным образом загружает Google Планета Земля в контейнере карты.
var map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(640,480) } );
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
// Enable the Earth map type
map.addMapType(G_SATELLITE_3D_MAP);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.setMapType(G_SATELLITE_3D_MAP);
Просмотреть пример (services-earth-plugin.html)
Доступ к объектам API Google Планета Земля также возможен из API Карт. Для доступа к корневому объектуGEPlugin типа трехмерных карт, вызовите GMap2.getEarthInstance:
map.getEarthInstance(function(ge) {
// Direct Earth API calls can go here
ge.getLayerRoot().enableLayerById(
ge.LAYER_BORDERS, true); // Turn on borders and labels
});
Чтобы дать пользователям возможность искать местные организации, встройте на свой сайт элемент управления местным поиском с помощью GoogleBar. У панели GoogleBar обновился пользовательский интерфейс. Кроме того, к ее функциям добавлена реклама в результатах, которую можно использовать для получения дохода от сайта с API.
Чтобы использовать панель GoogleBar, сперва необходимо указать ее поведение, используя объект GGoogleBarOptions, который передается конструктору GMap2. После создания карты, включите GoogleBar, вызвав GMap2.enableGoogleBar(). Панель GoogleBar была переработана. Изменились не только ее вид и стиль – теперь она добавляет потоки прибыли от рекламы к сайтам API Карт.
Примечание. Панель GoogleBar предоставляет тонкую оболочку вокруг AJAX API поиска Google , отдельного продукта, со своими собственными условиями предоставления услуг.
Поскольку функции переработанной панели GoogleBar отличаются от предыдущей версии, ее новый пользовательский интерфейс не используется по умолчанию, а включается самим пользователем. Чтобы включить панель GoogleBar, установите свойство style в объекте GGoogleBarOptions на "new". В ближайшем будущем эта функциональность станет включенной по умолчанию.
Нижеследующий пример настраивает GoogleBar с новым видом и стилем:
var map;
if (GBrowserIsCompatible()) {
var mapOptions = {
googleBarOptions : {
style : "new",
}
}
map = new GMap2(document.getElementById("map_canvas"), mapOptions);
map.setCenter(new GLatLng(33.956461,-118.396225), 13);
map.setUIToDefault();
map.enableGoogleBar();
}
Просмотреть пример (control-googlebar.html)
Отметьте, что результаты, выдаваемые этим элементом управления, будут содержать рекламу. Если вы желаете получать доход от рекламы в результатах поиска через GoogleBar, обратитесь к Получение дохода от рекламы ниже.
Google, в данный момент, предоставляет несколько продуктов AdSense для Карт, позволяющих превратить приложение API Карт Google в инструмент получения прибыли:
GoogleBar.Для получения дохода от рекламы, эти объекты AdSense для Карт привязываются к аккаунту AdSense, который был включен с помощью AdSense для Поиска или AdSense для Контента, соответственно.
Эти методы ведения рекламы фундаментально различны и требуют различных продуктов Google AdSense. Отображение рекламных объявлений в GoogleBar отвечает на прямые поиски пользователей, так что в аккаунте AdSense следует включить AdSense для Поиска. Отображение объявлений в панели на карте, в зависимости от окна просмотра пользователя, требует от аккаунта AdSense включить AdSense для Контента.
При отсутствии у вас аккаунта AdSense, зарегистрируйтесь для получения аккаунта. После регистрации (или в случае, если аккаунт уже есть), убедитесь, что в аккаунте также включены AdSense для Поиска и/или AdSense для Контента.
После создания аккаунта Adsense для Поиска или AdSense для Контента, будет получен идентификатор издателя Adsense для Поиска (AFS) или AdSense для Контента (AFC). Этот идентификатор издателя используется внутри кода для привязки любой показываемой рекламы к аккаунту AdSense.
GoogleBarЧтобы начать получать доход от рекламы при пользовательских поисках, с помощью GoogleBar, укажите свой идентификатор издателя внутри свойства client объекта GGoogleBarAdsOptions при создании карты. Вы начнете получать доход от рекламы за любое нажатие на локальных результатах в приложении API. При желании, можно также указать AdSense для Поиска channel, если он настроен. (Дополнительные сведения о рекламных каналах можно найти здесь.)
Кроме того, можно также указать adsafe (Уровень безопасности объявлений), который будет связан с вашей рекламой и language для отображения результатов.
Нижеприведенный пример показывает панель GoogleBar, настроенную на получение дохода от рекламы. Отметьте, что в вашем приложение следует использовать собственный идентификатор издателя.
var map;
if (GBrowserIsCompatible()) {
var mapOptions = {
googleBarOptions : {
style : "new",
adsOptions: {
client: "partner-google-maps-api",
channel: "AdSense for Search channel",
adsafe: "high",
language: "en"
}
}
}
map = new GMap2(document.getElementById("map_canvas"), mapOptions);
map.setCenter(new GLatLng(33.956461,-118.396225), 13);
map.setUIToDefault();
map.enableGoogleBar();
}
Просмотреть пример (control-googlebar-ads.html)
Дополнительные сведения см. в GGoogleBarAdsOptions Справочных материалах по API.
Ad Unit Карт Google –·это новая функция рекламы в портфеле AdSense для Карт, созданная путем указания параметра в конструкторе GAdsManager. Ad Unit Карт отображает небольшую панель, содержащую рекламу, специально подогнанную под область, показываемую на карте.
Ad Unit Карт включается путем указания стиля 'adunit' внутри объекта GAdsManagerOptions. Не забудьте также указать в конструкторе GAdsManager также свой идентификатор издателя. Вам начнет поступать доход от рекламы за любые нажатия на объявления внутри Ad Unit Карт в вашем приложении API. При желании, можно также указать AdSense для Контента channel, если он настроен. (Дополнительные сведения о рекламных каналах можно найти здесь.)
Нижеприведенный пример показывает GAdsManager, настроенный на получение дохода от рекламы. Отметьте, что в вашем приложение следует использовать собственный идентификатор издателя.
var publisher_id = yourPublisherID;
var adsManagerOptions = {
maxAdsOnMap : 2,
style: 'adunit',
// The channel field is optional - replace this field with a channel number
// for Google AdSense tracking
channel: 'your_channel_id'
};
adsManager = new GAdsManager(map, publisher_id, adsManagerOptions);
adsManager.enable();
Просмотреть пример (adsmanager-adunit.html)
Дополнительные сведения см. в GAdsManager Справочных материалах по API.
API Карт Google поддерживает отображение географических данных в форматах KML и GeoRSS. Эти форматы данных добавляются к карте с помощью объекта GGeoXml, конструктор которого использует URL-адрес общедоступного XML-файла. Метки GGeoXml воспроизводятся в виде объектов GMarker, тогда как ломаные линии и многоугольники GGeoXml – в виде ломаных линий и многоугольников API Карт Google. Элементы <GroundOverlay> в KML-файлах воспроизводятся на карте в виде элементов GGroundOverlay.
Объекты GGeoXml добавляются к карте с помощью метода addOverlay(). (Удалить их с карты можно с помощью метода removeOverlay().) Поддерживаются файлы KML и GeoRSS. Отметьте, что GGeoXml – это модульный объект API Карт Google, который невозможно полностью загрузить до его первого использования. Поэтому вызвать конструктор этого объекта можно только после полной загрузки страницы. Для этого обычно нужно вызвать конструктор GGeoXml в таком обработчике <body>, какonload.
// The GGeoXml constructor takes a URL pointing to a KML or GeoRSS file.
// You add the GGeoXml object to the map as an overlay, and remove it as an overlay as well.
// The Maps API determines implicitly whether the file is a KML or GeoRSS file.
var map;
var geoXml;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geoXml = new GGeoXml("http://mapgadgets.googlepages.com/cta.kml");
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41.875696,-87.624207), 11);
map.addControl(new GLargeMapControl());
map.addOverlay(geoXml);
}
}
Просмотреть пример GeoRSS (geoxml-rss.html)
Просмотреть примеры KML (geoxml-kml.html)
API Карт Google позволяет добавить на карту информацию о пробках с помощью объекта GTrafficOverlay, который реализует интерфейс GOverlay. Информация о пробках добавляется на карту с помощью метода GMap2.addOverlay(). У объекта GTrafficOverlay имеются два метода (hide() и show()), которые управляют видимостью наложения с информацией о пробках. Информация о пробках отображается только для поддерживаемых городов.
При желании, можно передать параметры конструктору GTrafficOverlay, используя литерал объекта GTrafficOverlayOptions.
// The GTrafficOverlay is unique in that only one object of that type
// should be added to a map. Adding multiple traffic overlays produces
// no added benefit.
var map;
var trafficInfo;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
var trafficOptions = {incidents:true};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
}
Просмотреть пример пробок (trafficOverlay.html)
С помощью API Карт Google можно добавить на карту маршруты поездок, используя объект GDirections. Объект GDirections запрашивает и получает маршруты, используя либо строки запроса (например "От Нью-Йорка до Чикаго") либо значения широты/долготы в виде текста (например "От 40.712882, -73.967257 до 41.943181,-87.770677"). Объект GDirections также поддерживает составные маршруты поездок, состоящие из последовательности промежуточных точек. Маршруты отображаются в виде ломаной линии, обозначенной на карте, в виде совокупности текстовых указаний в элементе DIV<div> (например "Повернуть направо, на наклонный въезд Вилльямсбургского моста"), либо сочетания того и другого.
Чтобы использовать маршруты в API Карт Google, создайте объект типа GDirections и назначьте объект GMap2 или элемент <div> для получения и отображения результатов. По умолчанию карта центрируется и ограничивается в соответствии с полученным маршрутом (хотя это поведение можно изменить с помощью параметров объекта GDirectionOptions).
Маршруты поездок запрашиваются с помощью метода GDirections.load(). Этот метод принимает строку запроса и набор необязательных параметров GDirectionsOptions. Доступны следующие параметры:
locale указывает язык, который следует использовать при возвращении результатов, переопределяя такой параметр API Картhl, как , если он предоставлен. Если не указаны ни locale, ни параметр hl, то используется язык браузера по умолчанию.travelMode указывает способ перемещения, который следует использовать в расчете результатов.avoidHighways указывает, что при расчете результатов следует избегать автомагистралей.getPolyline указывает, что объект маршрута должен возвращать данные ломаной линии, необходимые, чтобы нарисовать возвращаемый маршрут на карте. По умолчанию, объект GDirections возвращает данные ломаной линии только при наличии карты, на которой ее можно отобразить. Если установлено значение true, но карта не предоставлена, данные ломаной линии следует обработать напрямую.getSteps указывает, что объект маршрута должен возвращать текстовые указания, даже если для отображения этих указаний не предоставлено панели <div>. Если установлено значение true, но панель не предоставлена, данные указаний следует обработать напрямую.preserveViewport указывает, что карта не должна автоматически центрироваться на ограничивающем прямоугольнике возвращенного маршрута и подстраиваться под его размер; вместо этого карта должна оставаться центрированной на текущем окне просмотра.По умолчанию, маршруты считаются маршрутами проезда на автомобиле, но можно запросить и другие способы перемещения, передав GTravelMode при вызове метода Directions.load(). Поддерживаются следующие способы перемещения:
G_TRAVEL_MODE_DRIVING указывает стандартные маршруты проезда, используя дорожную сетьG_TRAVEL_MODE_WALKING запрашивает пешие маршруты (где таковые доступны).Примечание.Пешие маршруты порой могут не включать в себя полноценных пешеходных дорожек, так что они поддерживаются только при предоставлении <div> в конструкторе GDirections; этот <div> используется для отображения предупреждения в возвращенных подробных текстовых указаниях. При отсутствии такового <div>, запрос пешего маршрута возвратит ошибку.
Если объект GDirections создавался с помощью объекта GMap2, то возвращаемые маршруты будут содержать наложения в виде ломаной линии. Если объект GDirections создавался с помощью элемента <div>, то возвращаемые маршруты будут содержать объект GRoute, включающий набор объектов GStep. (Для маршрутов, составленных из многоточечных сегментов, возвращаемые маршруты будут содержать несколько объектов GRoute, каждый из которых состоит из серии объектов GStep).
Учтите, что объект маршрута не сразу заполняется возвращаемыми данными. Поэтому объект GDirections определяет событие load, которое можно перехватить, чтобы узнать состояние объекта.
После возвращения маршрута, карта отобразит ломанную линию, показывающую маршрут, тогда как внутри предоставленного <div> отобразятся текстовые указания. Объект GDirections также внутренне сохранит результаты, которые можно будет извлечь с помощью методов GDirections.getPolyline() и/или GDirections.getRoute(i:Number). Этапы маршрута можно получить, используя метод GRoute.getStep(i:Number), а сводку HTML определенного этапа – с помощью GStep.getDescriptionHtml(). (См. Пути и этапы ниже.)
Объект GDirections также инициирует три события, которые можно перехватить:
load: это событие происходит, когда результаты расчета маршрута переданы успешно, но перед добавлением какие-либо наложений на карту или панель.addoverlay: это событие происходит после добавления на карту или в элементы DIV ломаных линий или текстовых компонентов маршрута.error: это событие происходит в случае ошибки при запросе маршрута. Дополнительные сведения об ошибке можно получить с помощью метода GDirections.getStatus().
// Create a directions object and register a map and DIV to hold the
// resulting computed directions
var map;
var directionsPanel;
var directions;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
directionsPanel = document.getElementById("my_textual_div");
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
directions = new GDirections(map, directionsPanel);
directions.load("from: 500 Memorial Drive, Cambridge, MA to: 4 Yawkey Way, Boston, MA 02215 (Fenway Park)");
}
Просмотреть пример (directions-simple.html)
Следующий пример идентичен первому, за исключением того, что маршрут вызывается, передавая G_TRAVEL_MODE_WALKING:
Просмотреть пример (directions-walking.html)
Объект GDirections также поддерживает многоточечные маршруты, которые строятся с помощью метода GDirections.loadFromWaypoints(). Этот метод использует массив текстовых адресов или текстовых широт и долгот. Каждая отдельная промежуточная точка маршрута рассчитывается как отдельный путь и возвращается в отдельном объекте GRoute. Каждый такой объект содержит набор объектов GStep.
Объекты GRoute хранят число этапов (типа GStep) для данного пути, геокод его начала и конца, а также другую расчетную информацию, такую, как расстояние, длительность и точная широта/долгота конечной точки (которые могут отличаться от геокода конца пути, если последний не расположен на сегменте дороги). Каждый объект GStep также содержит описание для этого текста (например "Повернуть на трассу US-101 S через наклонный въезд к Сан-Хосе") и расчетную информацию, включая расстояние, время поездки, а также точную широту/долготу.
За полной документацией по различным объектам, методам и событиям в пакете API Маршрутов, обращайтесь к Справочному руководству по API.