1. геокодування
2. статичні карти
3. Вбудовувані карти
4. Динамічні карти (JS)
5. Rails gem'и і JS плагіни
6. висновок

Перша і головна річ, яку потрібно знати про Google Maps - вони шикарні! Це швидкий, надійний, добре налаштовується і умовно-безкоштовний сервіс, причому безкоштовність його закінчується десь на рівні 2500 запитів в день, тому умовністю безкоштовності в разі переважної більшості стартапів можна знехтувати.

Коли я вперше зіткнувся з необхідністю додати в проект інтерактивну карту, мій досвід як розробника був відносно невеликий. У той час я постійно забував, що "немає нічого нового під сонцем" і замість пошуків готових рішень іноді винаходив велосипеди.

Так само сталося і з Google Maps: замість пошуків gem'ов, я почав з вивчення документації на сайті, про що зараз анітрохи не шкодую. З'ясувалося, що нічого особливо складного в інтеграції Google Maps API немає.

геокодування

Перш, ніж перейти безпосередньо до інтеграції Google Maps, варто згадати таку річ, як Геокодування (Geocoding).

Згідно з визначенням з сайту Google, геокодування це процес перетворення адрес (на зразок "1600 Amphitheatre Parkway, Mountain View, CA") в географічні координати в форматі latitude: 37.423021; longitude: -122.083739 (широта і довгота відповідно, частки градусів десяткові, без хвилин і секунд, північна або південна, західна або східна визначаються знаком).

Ці координати можна використовувати для розміщення маркерів або для позиціонування карти.

Для Rails існує відмінний gem - Geocoder , Який бере на себе питання, пов'язані з геокодування. Налаштовувати його дуже просто: достатньо після установки додати в таблицю, яка містить адреси, поля latitude: float і longitude: float, вказати в моделі:

geocoded_by: address after_validation: geocode

і при збереженні записи координати будуть оновлюватися.

Крім того, у Geocoder'a є ще кілька чудових "географічних" можливостей, на кшталт пошуку будь-яких об'єктів в околицях зазначеного місця.

статичні карти

Google надає роботу з картами двох видів - статичні і динамічні.

Здавалося б, область застосування статичних карт нульова, адже динамічні набагато привабливіші і функціональні, проте є два аргументи за використання статичних карт:

• по-перше, робота з ними, природно, набагато простіше,
• по-друге і найголовніше, вони без проблем і зайвих зусиль можуть бути додані в будь-якої генеріуемий статичний документ, наприклад, PDF-файл.

API статичних карт дуже простий - HTTP запит з параметрами повертає цілісне зображення. Усе. З отриманим зображенням можна робити все, що завгодно. Не варто, зрозуміло, обрізати копірайт Google або робити що-небудь подібне.

На цьому прикладі можна побачити знайоме багатьом нашим співробітникам місце - офіс Анаде в Дніпрі:

На цьому - воно ж, але трохи ближче:

І знову воно ж, тільки у вигляді фото (це теж один із сервісів Google Maps - Street View):

Список можливих параметрів можна знайти тут .

Очевидно, що вся інтеграція статичних карт в першому наближенні складається в написанні одного методу одного хелпера, щось на кшталт:

def google_map (center) "https://maps.googleapis.com/maps/api/staticmap?center= # {center} & size = 300x300 & zoom = 17" end

де в якості параметра center можна передати адресу або пару координат.

Тоді в верстці це буде доступно у вигляді:

image_tag google_map (center: location. address)

або

image_tag google_map (center: [location. latitude, location. longitude]. join ( ','))

Зрозуміло, що в реальному додатку параметри не слід робити "магічними числами", вони можуть як передаватися у вигляді аргументів на хелпер, так і зберігатися в файлі налаштувань.

Це, власне, все, що стосується інтеграції статичних карт.

Вбудовувані карти

API вбудованих карт дуже схожий на API статичних.

За допомогою всього лише одного HTTP-запиту можна легко додати інтерактивну карту в додаток. Її можна вбудувати розмістивши на сторінці iframe і вказавши URL-адресу Google Maps Embed API в якості атрибута src:

<Iframe width = "300" height = "300" frameborder = "0" style = "border: 0" src = "https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=ADDRESS_OR_COORDINATES "allowfullscreen> </ iframe>

Таким чином можна дуже легко і дуже швидко отримати базову функціональність Google Maps.

Природно, в реальному додатку такий код повинен бути поміщений в хелпер, трохи облагороджений тощо, однак інтеграція як і раніше залишається дуже простий.

Додаткову інформацію про вбудованих картах можна знайти тут .

Динамічні карти (JS)

Все як і раніше просто!

Перше, що потрібно зробити, це підключити Google Maps Scripts за допомогою тега <script>:

<Script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY async defer> </ script>

Друге: додати на сторінку div c ідентифікатором, наприклад, map. З цього ідентифікатора JS-скрипти будуть визначати, де саме малювати карту.

Третє, починати вивчати Google Maps Guide і додавати можливості до інтерактивної карти.

Розглянемо приклад: нехай у додатку існує кілька вкладок, кожній з яких відповідає карта однієї і тієї ж місцевості, але з різним набором маркерів на ній. По кліку на будь-якому з маркерів карта повинна бути отцентрирована на цьому і масштаб карти повинен бути збільшений.

Нижче наведено код на CoffeeScript для реалізації необхідного функціоналу.

Спочатку створенням клас, який реалізує необхідні процедури роботи з картою:

class GoogleMap # повернутися до початкового значення zoom = initialView: 15 closeView: 18 markers = [] map = undefined constructor: (home) -> # визначаємо центр карти і параметри відображення lat = home [ "lat"] lon = home [ "lon"] myLatlng = new google. maps. LatLng (lat, lon) mapOptions = zoom: zoom. initialView center: myLatlng # створюємо карту map = new google. maps. Map (document. GetElementById ( "map"), mapOptions) addMarker: (location, title) -> # створюємо маркер і додаємо в масив маркерів marker = new google. maps. Marker (position: location, title: title, map: map) markers. push marker # додаємо обробник події google. maps. event. addListener marker, "click", -> map. setZoom zoom. closeView map. setCenter marker. getPosition () addMarkers: (markerList) -> # додаємо всі маркери _. each markerList, (marker) => position = new google. maps. LatLng marker [ "lat"], marker [ "lon"] title = "# {marker [ 'full_address']}" @addMarker position, title drawMarkers: (map) -> # отрісовиваємих маркери _. each markers, (marker) -> marker. setMap map # ВАЖЛИВО: виклик методу setMap на маркері отрісовиваєт маркер, виклик з параметром null - стирає showMarkers: -> @setAllMap map hideMarkers: -> @setAllMap null removeListeners: -> _. each markers, (marker) -> google. maps. event. clearInstanceListeners (marker) deleteMarkers: -> @hideMarkers () @removeListeners () markers = [] app. google or = {classes: {}} app. google. classes. GoogleMap = GoogleMap

Цей клас використовується в коді наступним чином:

$ -> {GoogleMap} = app. google. classes googleMap = new GoogleMap ($ ( '[data - map]: eq (0)'). data ( 'home')) googleMap. placeMarkers ($ ( "[data-map]: eq (0)"). data ( "markers-list")) $ (document). on 'click', '[data - tab]', -> googleMap. deleteMarkers () googleMap. placeMarkers ($ ( "[data-map]: eq ($ (@). index ())"). data ( "markers-list"))

Все вже не так просто, але все ще зрозуміло, чи не так?

Rails gem'и і JS плагіни

Природно, один з головних питань про GoogleMaps, який цікавить RoR розробників, а чи можна використовувати всі принади GoogleMaps, без використання JavaScript взагалі.

Що ж, існує пара gem'ов, які намагаються в цьому допомогти.

Перший і найбільш популярний - Google-Maps-for-Rails . Відверто кажучи, цей gem дуже нагадує знамениту "Кашу із сокири". У ролі сокири виступає сам gem, в ролі крупи, масла, солі - все ті шматочки JS-коду, які все одно доведеться писати руками, щоб додати і кастомизировать карту.

Інша справа - gem GoogleMaps , Який, до речі, на подив нелегко знайти. Тут все рейковий, додавання всіх основних JS-скриптів бере на себе сам gem. Але і він не без недоліків.

Складнощі з подібним підходом починаються, коли з'являється необхідність в інтерактивному зміні карт. Без JS-скриптів тут не обійтися, що сильно знижує цінність спроб оформлення подібного функціоналу у вигляді gem'ов.

Таким чином, остаточна відповідь - ні, не можна отримати повністю функціональну динамічну карту без JS-коду.

Що стосується JS-плагінів, переважна більшість переглянутих безкоштовних варіантів зводяться до одного - JS-код, скопійований з Google Maps Guide, іноді трохи реорганізований.

Список плагінів, які справили найбільш приємне враження:

Плюси використання gem'ов не знайдені. Плюс використання плагінів - всі необхідні скрипти вже підключені в плагін і ви можете починати працювати з картою без попередньої реалізації базового набору скриптів.

До мінусів як gem'ов, так і плагінів можна віднести необхідність побудови логіки додатка, спираючись на їх синтаксис і цей синтаксис попередньо треба вивчити. У разі зміни GoogleMap API (а подібне траплялося), при відсутності підтримки gem'а розробником (і таке траплялося), це може призвести до сумних наслідків.

висновок

Інтеграція статичних і вбудованих карт - питання написання одного методу. У пошуках "готових рішень" просто немає сенсу.

Інтеграція динамічних карт складніше, але не настільки, щоб не спробувати зробити це "з нуля", так як:

• це допоможе вам розібратися в їх API і можливостях, що напевно стане в нагоді в майбутньому;
• це не займе більше часу, ніж інтеграція за допомогою "готових" рішень;
• це позбавить вас від витрати часу на пошуки рішення краще;
• це позбавить вас від вивчення чужого (і потенційно незграбного) синтаксису;
• це додасть вам фронтендерского досвіду;
• це, врешті-решт, просто цікаво.

І так, написаний код може бути легко використаний в новому проекті або навіть винесено в своє рідне плагін. А отже, хто знає, можливо, в майбутньому з'явиться стаття про вашому готовому рішенні!