gmaps.js — самый легкий способ использования Google Maps API

Расскажу об одной небольшой (~30kb) JS библиотеке для удобной работы с Google Maps API под названием gmaps.js. Раз уж библиотека создана для ускорения процесса веб-разработки, то и я вас задерживать не буду. Как можно понять из названия, она делает не что иное, как упрощает взаимодействие с API Google Maps. Многие из вас работали с API и, вероятно, каждый раз вам приходилось попотеть, чтобы порыться в документации и реализовать, например, свое собственное описание метки на карте. Или подписаться на событие взаимодействия с картой… Итак, она пока еще не заимела ни одной мажорной версии, а в текущий момент имеет версию 0.1.12.3. Распространяется под лицензией MIT License и разрабатывается целым сообществом (и вы тоже можете в этом помочь). Примеры возможностей Создание карты

А еще можно добавить опции zoom, width, height. Хотя по стандарту ширина и высотка карты будут подогнаны под контейнер. События

Поддерживаются все события Maps API. Геолокация

Ну разве не прелесть? Добавление маркера

И всё, всё, всё! Библиотека поддерживает почти полный функционал Maps API, включая вывод статических карт(картинкой), наложение слоев, прокладывание маршрутов, рисование полигонов, рисование своих контролов, GeoRSS и всякое такое остальное… Прошу ознакомиться с сайтом библиотеки: http://hpneo.github.com/gmaps/ и начинать творить. И сразу же форкнуть репозиторий на Github: https://github.com/HPNeo/gmaps UPD:KidsKilla подсказывает, что, в принципе, по Maps API ToS никто не имеет право создавать свои врапперы(оболочки) поверх действующего API, пока не получит официальное разрешение Гугла. (https://developers.google.com/maps/terms, пункт 10.2). На что разработчик (Gustavo Leon) ответил, что сделает две вещи: 1)запросит разрешения у гугла 2)уже открыт тикет по подключению не только […]

Read more

Google Maps API

Картографический сервис – зачем это? Ну например, я 10 лет жил в нашей маленькой провинции, а потом взял и понаехал в Москву, и всё для меня так ново. А где магазины, боулинг, кафешки, парки отдыха – надо знать же, где тратить московскую зарплату. Но вот беда, как узнать? Раньше был справочник «Желтые страницы» и там была карта и всё по адресам. Чтобы найти что-то уходило масса времени. Сейчас стало всё в разы проще. Вот прекрасный пример: http://www.pushkino.org/. Но это далеко не всё. Я могу отслеживать погоду, пожары, пробки (кстати!) в реальном времени. Мой заказчик может не вводить свой адрес, а попросту отметить его на карте и я буду знать куда доставить ему товар – какое классное решение, не надо всего этого – «Проспект маршала Блюхера, 43, г. Санкт-Петербург, Россия». Задача для примера Всё лучше узнавать практически, так что сделаем задачу для примера, чтобы обрести навыки. Вот примерный план работ: Вывести карту (надо же!) Задать город Переместить карту к городу Маркером указать адрес Добавить информации Вывести карту (надо же!) Сохранить маркер с иноформацией (при клике на него вывести ее) Избежать нагромождения (т.е. сделать кластеризацию) маркеров.   Как делать?   Ключ API Ключ API нужен для использования работы с картой, т.е. при запросе всех их скриптов и сервисов в параметры нужно добавлять &key=[тут наш ключ]. Впрочем для http://localhost он не нужен. Получить его надо тут: http://code.google.com/apis/maps/signup.html. Кстати, работает и без него на сайте, но может это временно. Для v.3 не нужен Map\Marker\InfoWindow Для работы нам понадобится 3 основных объекта. Первое – это […]

Read more

Примеры работы с разными map API

Есть много статей на тему знакомства с Google Map Api и Yandex Map Api, но про остальные картографические сервисы не так много практического материала. В недавнем времени работал с Api: Google map Yandex map Yahoo map Bing map OpenStreet map И хотел обобщить работу с вышеупомянутыми сервисами, а именно инициализация карты и установление маркеров по клику мышки. Материалы в статье представлены в виде Html кода, javascript и результата — скриншота, а так же исходники на vs 2010 MVC3. С Google map ситуация проще всего: практического материала много, мой пример выглядит следующим образом: Html page:

Script:

В результате получим карту Google c возможностью добавлять маркеры: Для инициализации Yandex map вам понадобится ключ доступа к сервису и следующий пример: Html page:

Script:

В результате получим карту Yandex c возможностью добавлять маркеры: Обратите внимание на координаты, в Google идет сначала долгота, потом широта, а в Yandex наоборот! Пример работы с Yahoo map api: Html page:

Script:

В результате получим карту Yahoo c возможностью добавлять маркеры: Для работы с Bing map api нужно взять ключ: www.microsoft.com/maps/developers/web.aspx Пример работы с Bing map api: Html page:

Script:

В результате получим карту Bing c возможностью добавлять маркеры: Пример работы с OpenStreet map api: Html page:

Script:

В результате получим карту OpenStreet c возможностью добавлять маркеры: Вот такие интересные примеры работы с картами, думаю кому то будут полезны. Исходники на VS2010 MVC3. Источник: http://habrahabr.ru/post/131249/ Разработка и создание сайтов, интернет-магазинов, веб-приложений, порталов, лэндингов, мобильных приложений (Киев)

Read more