There are no translations available.
Базовим елементом у будь-якому додатку, що використовує третю версію Google Maps API є сама “карта”. У статті описано, як використовувати об’єкт google . maps . Map та базові дії з картою.
Найлегший спосіб почати вивчати Google Maps API— за допомогою простого прикладу. Наступна веб-сторінка покаже карту, відцентровану по Києву:
Навіть у цьому простому прикладі є декілька цікавих речей:
-
Ми оголосили, що додаток використовує HTML5, вписавши декларацію <! DOCTYPE html >.
-
Ми включили Maps API JavaScript використовуючи скриптовий тег.
-
Ми створили елемент div за назвою "map _ canvas ", що буде включати нашу карту (Map).
-
Ми створили об’єкт JavaScript для зберігання властивостей карти.
-
Ми написали функцію для створення об’єкту map .
-
Ми ініціалізували об’єкт карти шляхом обв’язки події onload у тега < body > .
-
Також ми включили тег <style > для того, щоб наша карта займала увесь можливий простір.
Налаштування карти
Для ініціалізації карти спочатку ми створюємо об’єкт з налаштуваннями карти. Так як ми хочемо відцентрувати карту на конкретній точці, ми також створимо значення latlng , що зберігає цю точку та передає її до налаштувань карти.
Ми також встановлюємо початковий рівень масштабування і тип карти mapTypeId до google . maps . MapTypeId . ROADMAP . Підтримуються наступні типи:
-
ROADMAP відображає звичайні двовимірні тайли Google Maps.
-
SATELLITE відображає супутникові знімки.
-
HYBRID відображає суміш фотографій та шару зі значними особливостями (дороги, назви міст).
-
TERRAIN відображає тайли з фізичним рельєфом для відображення висот і водних об'єктів (гори, річки і т.д.).
Об’єкт карти
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Клас JavaScript, що відповідає за карту – це клас Map . Об'єкти цього класу визначають одну карту на сторінці. Ви можете створити більше одного примірника цього класу - кожен об'єкт буде визначати окрему карту на сторінці. Ми створюємо новий екземпляр цього класу з використанням оператору JavaScript new .
При створенні нового екземпляра карти, ви вказуєте елемент <div > HTML на сторінці в якості контейнера для карти. HTML елементи є дітьми об'єкту document JavaScript, і ми отримуємо посилання на цей елемент через метод document . getElementById () .
Цей код визначає змінну (що називається map ) і присвоює змінній новий об'єкт Map , також передаючи налаштування, визначені в об’єкті myOptions . Ці опції будуть використовуватися для ініціалізації властивостей карти.
Завантаження карти
<body onload="initialize()">
Під час, коли малюється HTML-сторінка, будується об’єктна модель документу (DOM), а також будь-які зовнішні зображення та скрипти завантажуються та включаються до об’єкту document . Для того щоб забезпечити, що наша карта буде розташована після того, як уся сторінка повністю завантажиться, ми виконуємо функцію, що конструює об’єкт Map тільки тоді, коли елемент <body > отримає подію onload .
Широта і довгота
Нам потрібний спосіб для позначення місця розташування на карті. Об'єкт Google . maps . LatLng забезпечує такий механізм в рамках Google Maps API. Ви будуєте об’єкт LatLng , передаючи його параметри в порядку {широта, довгота}:
var myLatlng = new google.maps.LatLng(myLatitude,myLongitude)
Процес перетворення адреси в географічній точці називається геокодуванням. Геокодування підтримується в цій версії Google Maps API. Додаткові відомості є на сторінці Geocoding.
Об’єкти LatLng мають безліч застосувань у Google Maps API. Google . maps . Marker об'єкт використовує LatLng в своєму конструкторі, а також його використовують для накладення маркерів на карту в будь-якому географічному місці.
Автор Всеволод Соловйов, магістрант НТУУ “КПІ” |