Освоюємо google maps api

Сьогодні почав освоювати API Google Maps. Знадобилося зробити карту Москви з мітками, при клацаннях за якими буде відбуватися перехід на сторінки, що описують знаходяться там об'єкти. Як з'ясувалося, все гранично просто. Але розповім по порядку.

Крок 1. Завантажуємо скрипт Google Map API:

В офіційній документації рекомендується робити це всередині head, однак якщо завантажити скрипт з body (в моєму випадку це було краще), все працює. Параметр sensor = false означає, що не потрібно підтримка пристроїв GPS для визначення поточного місцезнаходження користувача.

Крок 2. Створюємо область для відображення карти

Як бачимо, це може бути звичайний div. Якщо потрібно показати карту на все вікно, то можна прописати в стилях таке:

Крок 3. Включаємо показ карти

Для цього спочатку створимо об'єкт LatLng з координатами точки, яка буде показуватися в центрі карти:

Як координат використовуються географічна довгота і широта. Дізнатися їх можна за допомогою звичайної карти Google: знайти на карті потрібне місце, клацнути по ньому правою кнопкою і вибрати "що тут знаходиться". Координати з'являться в рядку пошуку.

Тепер поставимо інші властивості карти:

Тут zoom - початковий машстаб (10 якраз підходить для того, щоб показати частину Москви всередині МКАД), в center вказується об'єкт з координатами центральної точки, а mapTypeId задає початковий вигляд карти (в даному випадку обрана звичайна карта, так само можуть бути варіанти SATELLITE - вид з супутника, HYBRID і TERRAIN).

І нарешті завантажуємо саму карту:

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

Крок 4. Додаємо маркер

Знову створюємо об'єкт з точкою, на яку буде вказувати маркер:

І додаємо маркер на завантажену на попередньому кроці карту:

Тут position - об'єкт з координатами, map - карта, на яку потрібно додати, а title - підказка, яка буде з'являтися при наведенні на маркер.

Крок 5. Додаємо перехід по кліку

Для клацань, подвійних клацань, зміни масштабу карти і інших подібних подій обробники додаються за допомогою об'єкта google.maps.event:

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

От і все! Залишилося тільки закрити функцію і тег script:

А так же додати виклик функції initialize на подію onLoad:

не можу знайти на просторах інтернету, як тепер за таймером оновлювати координати цієї точки з переміщенням / домальовуванням карти? (Рефреш всієї сторінки робити не хочеться, планую робити ajax запит на сервер за отриманням оновлених координат. Api що у яндекса, що у гугля - занадто об'ємне, і з наскоку знайти потрібний метод не виходить)
і щоб два рази не вставати: якщо використовувати свою іконку-стрілку, чи можна змінювати її кут (у мене є азимут напрямку)

Для переміщення / домальовування, швидше за все, підійде метод або PanTo, або panToBounds об'єкта maps (перший ставить нову точку в центр, другий - робить мінімальне зміщення карти так, щоб точка була видна).
Тобто в моєму прикладі це б виглядало приблизно так: mosocw.panToBounds (55,36.5);
А змінювати координати точки, по ідеї так: marker.setPosition = new google.maps.LatLng (55.763525,37.560893).
Щодо кута стрілки - сумніваюся, що це можливо. Швидше доведеться зробити набір іконок, і вибирати потрібну відповідно до того, куди повинна показувати стрілка.

А якщо центр знаходиться на Північному Полюсі, то напевно недостатньо буде завдання лише координат центру в даному випадку, але напевно треба щось ще типу зміни проекції? А ось що для цього необхідно?

Схожі статті