Сучасні web сервіси дозволяють з мінімальними зусиллями істотно розширити функціональність сайту.
Сьогодні мова піде про використання карт від Google на власному сайті.
Для початку визначимося з завданням.
Припустимо, нам потрібно зробити пошук по картах. Тобто відвідувач вводить назву міста в полі форми, натискає кнопку «Знайти».
Після цього наш додаток показує відповідну карту.
Загалом, повинно вийти щось схоже на цю сторінку .
Переходимо до реалізації.
Для використання карт Google на власному сайті потрібно отримати спеціальний ключ (AJAX Search API Key).
Процедура гранично проста. заходимо на сторінку реєстрації , Погоджуємося з ліцензією, вводимо адресу сайту в форму і тиснемо кнопку «Generate API Key».
В результаті ви отримаєте довгий рядок з ключем.
Розміщуємо карту на сторінці.
Ця операція виконується в два кроки.
1) Готуємо на сторінці блок для карти
<Div id = "map_canvas" style = "width: 600px; height: 400px"> </ div>Тут потрібно тільки задати його розміри (в даному випадку - 600х400 px).
2) В заголовку сторінки підключаємо Google API і невеликий скрипт, який і створює карту
<Script src = "http://maps.google.com/maps?file=api&v=2&key=ваш_ключ" type = "text / javascript"> </ script> <script type = "text / javascript" > var map; function initialize () {// створюємо об'єкт для роботи з картою map = new GMap2 (document.getElementById ( "map_canvas")); if (GBrowserIsCompatible ()) {// встановлюємо координати і початкове наближення map.setCenter (new GLatLng (50.453629, 30.502838), 13); // додаємо шкалу зуму map.addControl (new GLargeMapControl ()); // додаємо перемикач типу карт (Карта, Супутник, Гібрид) map.addControl (new GMapTypeControl ()); // вказуємо тип карти за замовчуванням (Супутник) map.setMapType (G_SATELLITE_MAP); }} </ Script>Цей скрипт створює об'єкт типу GMap2 і пов'язує його з блоком, в якому повинна бути розміщена карта (map_canvas).
Після цього за допомогою функції GBrowserIsCompatible () ми перевіряємо, чи підтримує браузер з Google Maps і якщо так, то виконуємо кілька початкових налаштувань.
Метод setCenter показує яка точка на повинна знаходиться в центрі карти і величину наближення (зуму). У цьому прикладі я вказав координати Києва. Детальніше на них ми зупинимося трохи пізніше.
Метод addControl додає на карту різні елементи управління. В даному випадку ми додали блок навігації і зума (GLargeMapControl) і перемикач типу карт (GMapTypeControl).
І, нарешті, встановлюємо тип карти, яка використовується за замовчуванням (G_SATELLITE_MAP - супутникова карта).
Додаємо форму пошуку
<Label for = "sityname"> Назва міста: </ label> <input type = "text" name = "sityname" id = "sityname" /> <input type = "button" onclick = "getAdress ()" value = "Знайти" />Тут все гранично просто. Поле для введення адреси і кнопка «Знайти».
Тепер трохи теорії.
Перетворення адреси в географічні координати називається геокодінгом ( Geocoding ). В Google Maps для цю операцію виконує спеціальний об'єкт GClientGeocoder.
Тобто нам потрібно виконати такі операції.
1) Створити об'єкт GclientGeocoder.
2) За допомогою його методу getLatLng визначити координати.
3) Встановити на карті маркер в отриманої точці.
4) Додати на карту напис.
Всі описані операції виконуються двома невеликими функціями.
var geocoder = new GClientGeocoder (); function getAdress () {var address = document.getElementById ( "sityname"). value; geocoder.getLatLng (address, function (point) {if (! point) {alert (address + "не найден");} else {geocoder.getLocations (address, addAdr);}}); } Function addAdr (response) {// видаляємо шари, якщо вони є map.clearOverlays (); if (! response || response.Status.code! = 200) {alert ( "\" "+ address +" \ "не найден"); } Else {// створюємо об'єкт типу GLatLng і напис place = response.Placemark [0]; point = new GLatLng (place.Point.coordinates [1], place.Point.coordinates [0]); marker = new GMarker (point); // розміщуємо напис на мапі map.addOverlay (marker); // додаємо текст на напис marker.openInfoWindowHtml (place.address + '<br />' + 'Широта:' + place.Point.coordinates [1] + '<br />' + 'Довгота:' + place.Point .coordinates [0]); }}При натисканні на кнопку «Знайти» викликається функція getAdress, яка викликає метод getLatLng. У його першому параметрі передається самі ввели адресу, а в другому оголошена анонімна функція, яка буде викликана полсе отримання результатів обробки адреси.
Ця функція в якості параметра отримує точку з координатами. В принципі, цього достатньо, щоб показати потрібну карту, але ми можемо отримати більш детальну інформацію за допомогою методу getLocations.
Цей метод також як і getLatLng в першому параметрі отримує адресу, а в другому - ім'я функції, яка буде викликана після отримання даних. В даному прикладі це addAdr.
Функція addAdr отримує результат виконання методу getLocations, тобто структуру з даними. Після ми просто встановлюємо на карті маркер (метод addOverlay об'єкта GMap2) і напис з текстом (метод openInfoWindowHtml).
висновок
У цьому прикладі показані далеко не всі можливості Google Maps. API досить великий і постійно розвивається.
Головна проблема в тому, що далеко не для всіх міст СНД існують звичайні карти (з назвами вулиць). Супутникові фотографії, звичайно, є, але по ним не завжди зручно орієнтуватися. До речі, саме з цієї причини я по-замовчуванню встановив тип карти G_SATELLITE_MAP.
В цьому плані дуже привабливо виглядають карти Яндекса. Наприклад, карта Києва у них є 🙂. Але API вони відкрили зовсім недавно і, наскільки я знаю, у них були проблеми з кирилицею (будемо сподіватися, що це швидко виправлять).
Загалом, розмістити на своєму сайті інтерактивну карту на сьогоднішній день не проблема.
завантажити приклад
Ви можете завантажити архів з прикладом , Наведеним у цій статті. Для використання вам потрібно буде замінити в файлі index.html рядок your_google_api_key на ваш ключ (API Key).
Або можна просто погратися з картою 🙂
До зустрічі!
Com/maps?
