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

16 июня 2015

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

Итак, она пока еще не заимела ни одной мажорной версии, а в текущий момент имеет версию 0.1.12.3. Распространяется под лицензией MIT License и разрабатывается целым сообществом (и вы тоже можете в этом помочь).

Примеры возможностей

Создание карты
<code><span class="keyword">new</span> GMaps({ div: <span class="string">'#map'</span>, lat: -<span class="number">12.043333</span>, lng: -<span class="number">77.028333</span> });</code>

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

События
<code>map = <span class="keyword">new</span> GMaps({ div: <span class="string">'#map'</span>, zoom: <span class="number">16</span>, lat: -<span class="number">12.043333</span>, lng: -<span class="number">77.028333</span>, click: <span class="keyword">function</span>(e) { alert(<span class="string">'click'</span>); }, dragend: <span class="keyword">function</span>(e) { alert(<span class="string">'dragend'</span>); } });</code>

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

Геолокация
<code>GMaps.geolocate({ success: <span class="keyword">function</span>(position) { map.setCenter(position.coords.latitude, position.coords.longitude); }, error: <span class="keyword">function</span>(error) { alert(<span class="string">'Geolocation failed: '</span>+error.message); }, not_supported: <span class="keyword">function</span>() { alert(<span class="string">"Your browser does not support geolocation"</span>); }, always: <span class="keyword">function</span>() { alert(<span class="string">"Done!"</span>); } });</code>

Ну разве не прелесть?

Добавление маркера
<code>map.addMarker({ lat: -<span class="number">12.043333</span>, lng: -<span class="number">77.028333</span>, title: <span class="string">'Lima'</span>, click: <span class="keyword">function</span>(e) { alert(<span class="string">'You clicked in this marker'</span>); }, infoWindow: { content: <span class="string">'<p>Home, sweet home...</p>'</span> } } });</code>
И всё, всё, всё!

Библиотека поддерживает почти полный функционал 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)уже открыт тикет по подключению не только Google Maps API, но и OpenStreetMap. Это же счастье!


Источник: http://habrahabr.ru/post/145152/

Написать комментарий

Адрес и телефон
E-mail: rs@corp2.net Skype: rudjuk
г. Киев, ул. Белорусская 30, офис. К2Р (схема проезда)
Мы в сети
Меню
www.megastock.ru Здесь находится аттестат нашего WM идентификатора 000000000000
Проверить аттестат
Наверх