Геокодування, використовуючи Google Maps

43

Від автора: багато сайтів своїй діяльності спрямовані на безпосередню роботу з користувачами, тобто здійснюють збір особистої інформації, а значить, підтримують реєстрацію; відображають на відповідних сторінках отриману інформацію по кожному з них, або дозволяють виконувати певні дії. Як приклад, можна привести сайт соціальної мережі. Відповідно, до чого я все це. Погодьтеся, що в деяких ситуаціях дуже корисно вивести на екран карту з нанесеною на неї міткою – адресою проживання певного користувача.

Тому в даному уроці ми поговоримо про те, як відобразити карту на екран браузера, як відцентрувати її і встановити мітку, згідно з адресою, який був вказаний користувачем.

скачать исходникискачать урок

Отже, для відображення карти, звичайно ж, ми скористаємося досить відомим сервісом під назвою Google Maps, який, швидше за все, Вам вже знайомий. Але коротко скажу, що Google Maps – це безкоштовний картографічний сервіс, який представляє інтерактивні карти і супутникові знімки практично всієї земної кулі.

Геокодирование, используя Google Maps

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

Хотів би зазначити, що процес перетворення адрес географічні координати називають геокодированием і цей механізм входить до складу бібліотек Google maps. А отже, давайте розглянемо, як працювати з ним.

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

Геокодирование, используя Google Maps

Далі, клікаємо по кнопці «Отримати ключ».

Геокодирование, используя Google Maps

Ключ прив’язується до конкретного проекту, який необхідно створити. Проект – це Ваш додаток в системі Google, який буде взаємодіяти з API. Тому натискаємо кнопку «Продовжити». Далі вказуємо ім’я нового ключа і клікаєм по посиланню «Зберегти», таким чином, створюємо новий ключ програми.

Геокодирование, используя Google Maps

Зверніть увагу, що, використовуючи радіо-кнопки у параметрі «Обмеження для ключа» — Ви можете запобігти несанкціоноване використання створеного ключа. Тобто Ви вказуєте, хто саме може використовувати створений ключ – веб-сайт, його IP-адресу, програми і т. д.

Після створення ключа, необхідно активувати цікавить Вас API, тобто підключити його до створеного проекту. Для цього в бібліотеці доступних сервісів (посилання «Бібліотека»), необхідно вибрати що цікавить API від Google (в нашому випадку це Google Maps API JavaScript).

Геокодирование, используя Google Maps

Тепер все готово до роботи з картами і для початку, хотів би навести посилання на сторінку офіційній документації по геокодированию Google Maps.

Геокодирование, используя Google Maps

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

Геокодирование, используя Google Maps

При цьому в блоці праворуч ми з Вами відобразимо карту, про яку говорили вище. Тому, насамперед необхідно підключити до поточної сторінки JavaScript API від Google, використовуючи всім відомі, теги script.

Формуючи значення атрибуту src, не забудьте в якості GET параметра key, вказати нещодавно згенерований ключ. Далі опишемо функцію, яка буде викликатися на виконання, після повного завантаження цікавить сторінки.

var map;
var geo;
function init() {
}

Змінні, оголошені перед функцією – map і geo, необхідні для зберігання об’єктів створеної карти і механізму геокодування відповідно. У коді створеної функції, для початку, створимо карту сайту, використовуючи наступний код:

var opt = {
zoom:15
}
map = new google.maps.Map(document.getElementById(«map_canvas»),opt);

Створюючи об’єкт, в якості першого аргументу необхідно вказати об’єкт типу Element, у який буде поміщена майбутня карта і який, можна отримати, здійснивши вибірку необхідного блоку в дереві DOM. В якості другого аргументу – передається у вигляді об’єкта, набір параметрів налаштувань відображення.

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

Геокодирование, используя Google Maps

Як було сказано вище, тепер необхідно перетворити повну адресу користувача, відповідні географічні координати — для відображення карти. І для цього необхідно надіслати запит до API Google за адресою: maps.googleapis.com/maps/api/geocode/output?parameters

GET-параметр output, може приймати одне з двох значень і відповідає за формат повертається відповіді від сервісу:

json – визначає виведення даних у форматі JOSN рядка;

xml – визначає виведення інформації у форматі XML.

Крім цього у запиті обов’язково необхідно передати повну адресу користувача, який потрібно перетворити в координати, у форматі, який визначається поштовою службою (повний список доступних переданих параметрів, наведено в документації).

Хотів би зазначити, що самостійно ми з Вами відправляти запит для геокодування не будемо, так як до тестового сайту підключено API Google і за великим рахунком, все вже зроблено за нас – потрібно тільки звернутися до відповідного інструменту.

Далі створимо об’єкт геокодера, який далі ми використовуємо для отримання географічних координат.

geo = new google.maps.Geocoder();

Наступним етапом, ми створимо змінну, в якій буде зберігатися точну адресу користувача.

var address = «+,+,+»;

Геокодирование, используя Google Maps

У змінній $user, міститься у вигляді масиву інформація, обрана з бази даних по певному користувачеві. Тепер, давайте перетворимо адреса координати і відобразимо карту на екрані.

geo.геокодів({‘address’ : address}, function (results,status) {
if(status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map:map,
position:results[0].geometry.location
});
}
else {
alert(‘Not valid address’);
}
});

Як Ви бачите, першим ділом ми звертаємося до об’єкта геокодера і викликаємо на виконання метод геокодів(), який виконає нас цікавить перетворення. В якості аргументів, передається зацікавив адресу, у вигляді властивості об’єкта і функція, яка буде викликана на виконання після відповіді від сервера. Дана функція приймає два параметри – масив з результатами роботи results і статус роботи механізму геокодування. При цьому якщо в якості статусу повертається рядок «OK» (при цьому значення «OK», так же міститься й у властивості google.maps.GeocoderStatus.OK), значить, процес геокодування завершено успішно і були знайдені відповідні координати.

Далі, визначаємо центр карти, використовуючи метод setCenter(), який в якості єдиного аргументу, у вигляді об’єкта приймає координати широти і довготи. Замете, що дані координати розташовуються в елементі location, багатовимірного масиву results.

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

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

Геокодирование, используя Google Maps

Ось власне і все що я хотів поговорити в даному уроці. При цьому ми з Вами розглянули тільки основи використання сервісу Google Maps і безпосередньо геокодування. Тому якщо дана інформація Вас зацікавила, продовжуйте самостійно вивчати дану тему, використовуючи офіційну документацію.

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!