Знакомство с Google Maps JavaScript API V 3 на примерах
Сегодня я хочу рассмотреть Google Maps Java Script API Version 3 на конкретных примерах, которые могут быть востребованы в повседневной работе.
Для начала необходимо получить ключ, с помощью которого большой брат будет за вами следить, а точнее — собирать статистику. Если вы превысите определенный лимит (на момент написания статьи это 25 тысяч запросов в день) вам придется начинать платить за дополнительные запросы. Теперь суть ясна, можем перейти к процедуре получения:
Начнем с простого, но полезного. Разместим на пустой страничке карту и четыре кнопки. На каждую кнопку привяжем по местоположению городов (Санкт-Петербург, Сидней, Нью-Юрк и Лондон). Кликая по каждой кнопке мы будем перемещать карту, и это позволит визуально сравнить размеры городов. Мне довольно любопытно сравнить родной Санкт-Петербург с этими городами, а вы можете немного изменить код и выставить свой город или добавить еще одну кнопку.
Чтобы пример заработал, вам необходимо заменить Your _ API _ Key на ваш ключик. Вы можете подумать, что опасно размещать в открытую ваш ключ в коде страницы и вы будете на все сто процентов правы, но тут есть одно большое НО:
Если вы зайдете в API Access -> Simple API Access то найдете там пункт в меню “ Edit allowed referers . ”, с помощью которого можно создать белый список доменных имен, с которых принимаются запросы, в противном случае они отклоняются. По умолчанию список пуст, что разрешает принимать запросы отовсюду.
Итак, все готово к первому запуску, посмотрев результаты можно заметить что Лондон, Сидней и Санкт-Петербург примерно занимают одинаковую площадь, в отличие от Нью-Юрка, который явно лидирует.
1. Google Api подключается с помощью ссылки на JavaScript файл и личного ключа. < script type EN-US" style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-ansi-language: EN-US; mso-highlight: white;">text / javascript » src EN-US» style=»background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-ansi-language: EN-US; mso-highlight: white;»>http :// maps . googleapis . com / maps / api / js ? key = Your _ API _ Key & sensor = false «>
3. В названии класса google.maps.LatLng спрятано две аббревиатуры — широта (latitude) и долгота (longitude), собственно их и принимает его конструктор
Теперь поставим собственный, маркер в виде маленького грузовичка и заставим его кататься по прямой от метро «Парк Победы» до «Московская Площадь» я специально выбрал этот маршрут чтоб не сильно думать о логике движения, так как там по прямой.
Google Maps API верисия 3
В конце мая 2009 года компания Google объявила о новой версии Google Maps API v3.
Пока это не окончательный релиз, данная версия находится в лаборатории Google, где идет ее улучшение и доработка, учитывая пожелания пользователей.
Я хочу познакомить посетителей моего блога с данной версией API.
Необходимость в новой версии возникла, когда разработчики задумались об использовании JavaScript Maps API для работы на мобильных устройствах, после появления браузеров с поддержкой JS для iPhone и устройст на базе Android.
Но скорость работы на мобильных устройствах существующий API v2 оказалось слишком медленной, тогда возникла необходимость полностью пересмотреть существующий код API.
Кроме увеличения скорости работы появились следующие изменения:
— не требуется ключ привязки API к конкретному домену;
— добавлена поддержка iPhone Safari и Chrome браузеров для мобильных устройств;
— интерфейс пользователя по умолчанию;
— переработан сервис геокодирования.
И так рассмотрим простой пример карты, использующей новую версию API.
Рассмотрим структуру кода подробнее.
Строка
cлужит для подключения JS API, параметр sensor указывает, использует ли ваше приложение различные датчики (например GPS), тогда параметр sensor=true.
Для использования конкретной версии локализации карты необходимо после параметра sensor добавить еще один параметр language
Для русского языка строка будет иметь вид:
В отличие от предыдущих версий все глобальные переменные в место буквы G используют пространство имен начинающееся на google.maps.
И теперь LatLng() принимает два аргумента значений координат.
В старой версии: var latlng = new GLatLng(56.2980387, 43.9123535);
В новой: var latlng = new google.maps.LatLng(56.2980387, 43.9123535);
После этого создается объект с набором аргументов свойств карты.
mapTypeId задает тип карты по умолчанию, может иметь следующие значения:
MapTypeId.ROADMAP – обычная карта;
MapTypeId.SATELLITE – спутниковый снимок;
MapTypeId.HYBRID – гибридная карта (спутниковый снимок с надписями);
MapTypeId.TERRAIN – показ виде ландшавта с улицами.
Инициализация карты производится в строке
var map = new google.maps.Map(document.getElementById(«map_canvas»), myOptions);
Здесь map_canvas элемент div, где располагается окно с картой.
По умолчанию на карту добавляются следующие элементы управления – большой элемент масштабирования и панорамирования, а также переключатель типа карты.
Элементы управления картой Google Maps API верисия 3
Я продолжаю рассматривать новую версию Google Maps API и в этот раз мы познакомимся с элементами управления картой.
Как я уже отмечал в предыдущей заметке ссылка, по умолчанию на карту добавляются следующие элементы управления – большой элемент масштабирования и панорамирования, а также переключатель типа карты.
diableDefaultUI [boolean] – параметр служит для отключения настроек элементов управления по умолчанию, для этого его значение нужно установить в состояние true (истина), по умолчанию он имеет значение false.
mapTypeControl [boolean] – параметр определяет показывать или нет элемент управления типом отображения карты, по умолчанию имеет значение true.
mapTypeControlOption – параметр определяет как элемент управления типом отображения карты будет показываться. Может иметь три значения: DEFAULT — значение по умолчанию, меняет свой размер в зависимости от размеров окна карты
HORIZONTAL_BAR – параметр будет отображать стандартный вид элемента управления;
DROPDOWN_MENU – отображается в виде выпадающего списка.
navigationControl [boolean] – параметр скрывает или отображает панель навигации, которая как правило расположена в левом верхнем углу карты.
navigationControlOptions – параметр определяет как будет отображаться панель навигации.
Может принимать четыре следующих значения:
DEFAULT – будет менять свой вид в зависимости от размера карты и других параметров;
SMALL – маленький элемент контроля позволяет увеличить или уменьшить карту;
ANDROID – выглядит как предыдущий, но предназначен для платформы Android:
ZOOM_PAN – большой элемент контроля позволяет изменять масштаб и панорамировать карту.
scaleControl [boolean] – будет или нет отображаться элемент управления масштабная линейка
Google Maps API верисия 3 : 21 комментарий
- admin Автор записи 28.08.2011 Конечно можно см. документацию
Приведу еще пример кода без зума и человечка: var myOptions = zoom: 4,
center: new google.maps.LatLng(-33, 151),
zoomControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
>
Google Maps API V 3 — руководство
Карты Google — это приложение и технология картографического веб-сервиса, предоставляемые Google. Приложение предоставляет подробную информацию о географических регионах, сайтах, картах улиц, планировщике маршрута для путешествий пешком, на автомобиле, с воздуха и спутниковых изображений многих мест во многих странах мира. API карт Google дает вам свободу создавать индивидуальные карты, которые могут выполнять самые разные задачи.
Это руководство предназначено для того, чтобы показать пользователю (знакомому с программированием на JavaScript и концепциями объектно-ориентированного программирования ), как создать Карту Google и связанное с ней приложение, используя JavaScript API Карт Google V 3.
Географическая широта и долгота
Мы можем представить Землю как сферу, так как мы описали, где на ее поверхности находятся точки? Наиболее распространенный способ определения местоположения точек на поверхности Земли описывается двумя числами — ее широтой и долготой. Если капитан корабля или пилот хочет указать положение на карте, они используют эти «координаты». Эти значения координат измеряются в градусах и представляют угловые расстояния, рассчитанные от центра Земли.
Широта:
Представьте Землю как прозрачную сферу с осью, вокруг которой она вращается. Концами оси являются Северный и Южный полюсы. Экватор — это линия, которая окружает Землю на равном расстоянии от Северного и Южного полюсов. Широта точки на поверхности Земли — это угол между экваториальной плоскостью и линией, которая проходит через эту точку.
Поскольку экватор расположен в 0 °, Северный полюс в 90 ° северной широты или 90 ° (положительная широта подразумевает север), а Южный полюс в 90 ° южной широты или –90 ° (отрицательная широта подразумевает север). Поэтому измерения широты находятся в диапазоне от 0 ° до + 90 ° или от 0 ° до –90 °.
Линии долготы, называемые меридианами, проходят перпендикулярно линиям широты и все проходят через оба полюса. Каждая линия долготы является частью большого круга. Для долготы нет явной точки в 0 градусов, как для широты. Долгота определяет местоположение точки на Земле с востока на запад путем измерения углового расстояния от гринвичского меридиана (или первичного меридиана, где долгота равна 0) вместе с экватором.
Диапазон измерений долготы от 0 ° до 180 ° к востоку или 180 ° (положительная долгота подразумевает восток) и диапазон от 0 ° до -180 ° к западу или -180 ° (отрицательная долгота подразумевает запад)
Широта и долгота на карте Google:
Получение ключа API
Используя ключ API, все приложения API Карт загружают карты. Ключ API бесплатный, но Google следит за использованием API Карт вашего приложения и, если он превышает лимиты использования , вы должны приобрести дополнительную квоту.
- Перейдите в консоль API по адресу https://code.google.com/apis/console и войдите в свою учетную запись Google.
- Нажмите на ссылку Услуги в левом меню.
- Активируйте сервис Google Maps API v3.
- Нажмите ссылку доступа к API в левом меню. Ваш ключ API доступен на странице доступа к API в разделе Простой доступ к API. Приложения API Карт используют Ключ для приложений браузера.
Вы можете использовать ключ API на любом сайте. Но рекомендуется использовать ваш ключ в ваших собственных доменах, чтобы предотвратить использование на неавторизованных сайтах. Чтобы указать собственный домен для использования ключа API, нажмите ссылку Изменить разрешенные источники . для своего ключа.
Создать простую карту
Вот простой пример карты, которая отображает карту с центром в Берлине, Германия.
html < height: 100% >body < height: 100%; margin: 0; padding: 0 >#map-canvas Краткое объяснение:
Здесь мы используем простой HTML5 DOCTYPE, как показано ниже.
Большинство современных браузеров отображают контент, объявленный с этим DOCTYPE, в «стандартном режиме», что означает, что ваше приложение должно быть более совместимым с браузерами. Если вы не используете этот тип документа, указанная веб-страница будет отображаться в «режиме причуд» и, возможно, не сможет отобразить некоторые из доступных функций. Это также сделает вашу веб-страницу менее совместимой с браузерами.
Это объявление CSS указывает, что контейнер карты (с именем map-canvas) должен занимать 100% высоты тела HTML.
Следующий скрипт загружает API Карт Google:
Использование API Карт Google требует, чтобы вы указали, использует ли ваше приложение датчик (например, GPS-локатор) для определения местоположения пользователя, что важно для мобильных устройств. Чтобы указать, что приложение использует сенсорное устройство, вы должны передать требуемый сенсорный параметр в тег . Приложения, которые определяют местоположение пользователя с помощью датчика, должны передавать параметр sensor = true при загрузке JavaScript API Карт.
Параметры карты:
<> Где объект LatLng содержит широту и долготу Берлина, а «центр» используется для центрирования карты в этой конкретной точке.
Масштаб: свойство масштабирования устанавливает текущий уровень масштабирования.
Объект карты:
Следующая команда создаст новый объект карты:
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);Загрузка карты:
Следующая команда загрузит карту:
google.maps.event.addDomListener(window, 'load', initialize);Далее: Справочник по Google Maps Javascript API V3.