Вбудовування Google Maps на власну сторінку
User Rating: / 5
PoorBest 
There are no translations available.

Google Maps на власній сторінціБазовим елементом у будь-якому додатку, що використовує третю версію Google Maps API є сама “карта”. У статті описано, як використовувати об’єкт google.maps.Map та базові дії з картою.
Найлегший спосіб почати вивчати Google Maps API— за допомогою простого прикладу. Наступна веб-сторінка покаже карту, відцентровану по Києву:
Google Maps Київ
Навіть у цьому простому прикладі є декілька цікавих речей:
  • Ми оголосили, що додаток використовує HTML5, вписавши декларацію <!DOCTYPEhtml>.
  • Ми включили Maps API JavaScript використовуючи скриптовий тег.
  • Ми створили елемент div  за назвою "map_canvas", що буде включати нашу карту (Map).
  • Ми створили об’єкт JavaScript для зберігання властивостей карти.
  • Ми написали функцію для створення об’єкту map.
  • Ми ініціалізували об’єкт карти шляхом обв’язки події onload у тега <body>.
  • Також ми включили тег <style> для того, щоб наша карта займала увесь можливий простір.
Налаштування карти
Для ініціалізації карти спочатку ми створюємо об’єкт з налаштуваннями карти. Так як ми хочемо відцентрувати карту на конкретній точці, ми також створимо значення latlng, що зберігає цю точку та передає її до налаштувань карти.
Ми також встановлюємо початковий рівень масштабування і тип карти mapTypeId до google.maps.MapTypeId.ROADMAP. Підтримуються наступні типи:
  • ROADMAP відображає звичайні двовимірні тайли Google Maps.
  • SATELLITE відображає супутникові знімки.
  • HYBRID відображає суміш фотографій та шару зі значними особливостями (дороги, назви міст).
  • TERRAIN відображає тайли з фізичним рельєфом для відображення висот і водних об'єктів (гори, річки і т.д.).
Київ Google Maps
Об’єкт карти
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Клас JavaScript, що відповідає за карту – це клас Map. Об'єкти цього класу визначають одну карту на сторінці. Ви можете створити більше одного примірника цього класу - кожен об'єкт буде визначати окрему карту на сторінці. Ми створюємо новий екземпляр цього класу з використанням оператору JavaScript new.
При створенні нового екземпляра карти, ви вказуєте елемент <div> HTML на сторінці в якості контейнера для карти. HTML елементи є дітьми об'єкту documentJavaScript, і ми отримуємо посилання на цей елемент через метод 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 в своєму конструкторі, а також його використовують для накладення маркерів на карту в будь-якому географічному місці.
Автор Всеволод Соловйов, магістрант НТУУ “КПІ”
 
>
BookNewsPractice SearchPartnersAbout
Підтримка та дизайн: Могильний С.С. Шаблон: Joomla Templates by BuyHTTP Joomla Hosting