Введение в использование API Карт Google

Стартовая веб-страница для начала работы с Google Maps API. это этот. В этом разделе сайта «Google Code» вы найдете всю полезную информацию для разработки приложений, способных взаимодействовать с картами мира Google.

Google Maps API — это мэшап

API означает интерфейс прикладного программирования. API-интерфейсы Google Maps предоставляют любому зарегистрированному пользователю целый ряд инструментов для управления картами земного шара, предоставленными гигантом Маунтин-Вью, с возможностью интеграции новых сервисов, разработанных собственными силами, для обогащения основных функций, предлагаемых Google Maps. .

Английский термин «мэшап» часто используется для обозначения смеси содержимого, которое можно создать с помощью Google Maps API. Хороший программист может «смешивать» карты Google с контентом собственного производства для создания веб-приложений любого типа. Нет предела воображению.

Генерация ключа Google Maps API

Google предоставляет любому пользователю, который запрашивает его, право использовать код Google Maps на своих веб-страницах. Нет никаких ограничений в отношении генерируемого трафика (однако компания запрашивает уведомление, если ожидается, что она будет производить более 500 000 просмотров страниц в день). Что касается услуги «геокодирования», то есть преобразования адреса в географические координаты, Google принимает в день количество запросов, поступающих с одного и того же IP-адреса, не превышающее 15 000 единиц.

Чтобы использовать Карты Google на своих веб-страницах, необходимо запросить специальный код: это уникальный «ключ», привязанный к указанному интернет-адресу. Предлагается указать URL вашего сайта, в рамках которого вы планируете использовать Google Maps API, в виде http://dominio.xx без предшествующего указания www. Благодаря этой возможности код Google Maps API можно будет использовать в любом поддомене (т. е. в основном домене и доменах третьего уровня).

Запрос ключа Google Maps API осуществляется путем входа в систему. на этой странице после входа в свою учетную запись Google (если у вас нет учетной записи пользователя, вам необходимо ее активировать).

Попробуйте создать html-страницу, назвав ее, например, maps.html и вставив в нее следующий код:

<голова>



<тип сценария="текст/javascript">

инициализировать функцию () {
если (GBrowserIsCompatible()) {
var map = новый GMap2(document.getElementById(«map_canvas»));
map.setCenter (новый GLatLng (37.4419, -122.1419), 13);
карта.setUIToDefault();
}
}

Первый код JavaScript позволяет загружать API Карт Google с серверов компании Маунтин-Вью. Для работы примера необходимо заменить указание KEY_DI_EXAMPLE на код, полученный при регистрации в сервисе Google Maps API.

Кроме того, для параметра датчика должно быть установлено значение true или false в зависимости от того, собираетесь ли вы отслеживать местоположение пользователя (клиентской системы).

Тег div с именем map_canvas действует как своего рода «заполнитель», внутри которого будет загружаться и отображаться окно Google Maps. Свойства ширины и высоты позволяют указать размеры, назначаемые картам (в данном случае 500×300 пикселей).

При загрузке веб-страницы, как видите, вызывается функция initialize() (событие onLoad в теге body). Эта функция JavaScript заботится о создании объекта, называемого картой, принадлежащего классу GMap2. Объекты этого класса представляют собой одну Карту Google на странице.

Следующие методы setCenter() и setUIToDefault() позволяют соответственно задать центральную точку карты в географических координатах (второе значение задает уровень масштабирования) и активировать в графическом интерфейсе предустановленные элементы управления для «навигация».

В настоящее время завершается разработка третьей версии (v3) API Карт Google. Хотя общий подход к вставке карты Google на любую веб-страницу остается неизменным, меняется синтаксис. Среди прочих изменений третья версия API больше не требует использования каких-либо ключей.

Некоторые практические примеры

Метод openInfoWindow позволяет просматривать «баллон», содержащий любую информацию, в любой точке «карты мира» Google Maps. Если вставить следующее после строки map.setCenter, Карты Google отобразят указанный HTML-текст в виде «выноски»:
map.openInfoWindow(map.getCenter(), document.createTextNode(«Проверка

Описание проверки»));

Также интересна возможность перехвата событий, происходящих на карте. Например, используя пространство имен GEvent, можно определить, когда пользователь щелкает точку на карте:
инициализировать функцию () {
если (GBrowserIsCompatible()) {
var map = новый GMap2(document.getElementById(«map_canvas»));
map.setCenter (новый GLatLng (43.9137, 12.4076), 4);
карта.setUIToDefault();

GEvent.addListener (карта, «щелчок», функция (наложение, точка) {
карта.clearOverlays();
если (точка) {
map.addOverlay (новый GMarker (точка));
карта.panTo(точка);
map.openInfoWindowHtml(точка,»широта:»+point.lat()
+»
«+»Долгота: «+point.lng());
}
});
}
}

Пример гарантирует, что когда пользователь щелкает в любом месте земного шара, Карты Google немедленно отображают координаты выбранной точки (широту и долготу).

По ссылке на этой странице, вы можете найти пример «мэшапа», который имеет дело с вычислением расстояния между двумя точками в километрах и милях. Сервис также использует JavaScript epoly.js, не разработанная напрямую Google, но позволяющая вам воспользоваться некоторыми дополнительными методами для GPolyline е GPolygon. Первый позволяет рисовать открытые линии и пути на карте Google, а второй позволяет рисовать настоящие замкнутые многоугольники (вы можете указать цвета контура и заливки).

Таким образом, с небольшими усилиями можно нарисовать любую фигуру на Картах Google с целью, например, выделения области: достаточно указать различные вершины, указав, например, географические координаты всех точек.

На этой странице пример того, чего можно достичь с помощью Google Maps API и JavaScript epoly.js.