Статьи

Карти Google Maps - вставка і оформлення (стилізація) карт на свій сайт - Юрій Ключевський

  1. 1. Встановлення картки Google Maps
  2. 2. Карта Google Maps Api - визначаємо місце і встановлюємо маркер
  3. 2.2 Встановлюємо маркер
  4. Як додати подію при натисканні на карту або маркер в Google Maps
  5. 2.3 Установка власної іконки для маркера в Google Maps
  6. 3. Задаємо свої стилі оформлення для карти Google Maps
  7. 4. Інформаційні вікна
  8. 4.1 Наведемо контент інфо-вікна:
  9. готова карта

Всім привіт! Сьогодні ми навчимося не тільки встановлювати карту Google Maps на свій сайт (будь-яку html сторінку), але і стилізувати карти Google Maps - змінювати кольори карти, а також додавати опис до маркера карти Google Maps, змінювати вид (зображення) маркера і додавати до нього своє опис. Поїхали!)

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

1. Встановлення картки Google Maps

Для початку давайте створимо html сторінку і вставимо на неї карту Google Maps. Робити це ми будемо за допомогою Google Maps API. Тобто підемо просунутим шляхом. Треба зауважити що у Google є хороша документація і інструкція російською та англійською по використанню Google Maps. Так що програмісти можуть відразу відправитися туди. Якщо ж ви хочете отримати зрозумілий покроковий урок - то залишайтеся.

Тепер я опишу по черзі дії які необхідно зробити і після приведу код сторінки з коментарями. Спершу створюємо HTML сторінку. потім:

  1. На сторінці створюємо елемент <div id = "map»> </ div> всередині якого у нас буде відображатися карта Google Maps.
  2. Необхідно стилізувати цей елемент, задати йому висоту і ширину щоб його було видно на сторінці.
  3. Підключаємо бібліотеку Google Maps Api, щоб створити карту і керувати нею. Без цієї бібліотеки карта не запрацює.
  4. Пишемо скрипт який створить і відобразить карту Google Maps на сторінці.

Ось код сторінки який у нас вийшов. Зверніть увагу на коментарі всередині, я описав що і де відбувається.

<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> 01 - My Google Map </ title> <! - 2. Необхідно стилізувати цей елемент, задати йому висоту і ширину щоб його було видно на сторінці -> <style> #map {width: 100%; height: 500px; } </ Style> </ head> <body> <! - 1. Створюємо елемент всередині якого у нас буде відображатися карта Google Maps -> <div id = "map"> </ div> <! - 4. пишемо скрипт який створить і відобразить карту Google Maps на сторінці. -> <script type = "text / javascript"> // Визначаємо змінну map var map; // Функція initMap яка Отріс карту на сторінці function initMap () {// В змінної map створюємо об'єкт карти GoogleMaps і вішаємо цю змінну на <div id = "map"> </ div> map = new google.maps.Map (document .getElementById ( 'map'), {// При створенні об'єкта карти необхідно вказати його властивості // center - визначаємо точку на якій карта буде центрироваться center: {lat: -34.397, lng: 150.644}, // zoom - визначає масштаб. 0 - видно всю платнеу. 18 - видно будинки і вулиці міста. zoom: 8}); } </ Script> <! - 3. Підключаємо бібліотеку Google Maps Api, щоб створити карту -> <! - Атрибути async і defer - дозволяють завантажувати цей скрипт асинхронно, разом із завантаженням всієї сторінки -> <! - у підключенні бібліотеки Google Maps Api в кінці вказано параметр callback, після підключення і завантаження цього Api спрацює функція initMap для відтворення карти, яку ми описали вище -> <script async defer src = "https://maps.googleapis.com/maps / api / js? callback = initMap "> </ script> </ body> </ html>

Тепер у нас є ось така карта, але не вистачає маркера для зазначення місця.
Також ви запитаєте, а як вказати на карті ту адресу який нам потрібен.

2. Карта Google Maps Api - визначаємо місце і встановлюємо маркер

2.1 Визначаємо місце центрування карти

Давайте покажемо на карті розташування Великого Театру. У параметрі center ми визначали координати центрування карти:

center: {lat: -34.397, lng: 150.644},

Нам необхідно отримати такі координати для нашого місця. Для цього йдемо в звичайну версію Google Maps і правою клавішею натискаємо на який нас цікавить місці. Натискаємо «Що тут» і отримуємо координати місця. (55.760186, 37.618711). Заодно і зміню масштаб, встановивши його на 18: zoom: 18.

2.2 Встановлюємо маркер

Місце визначили. Залишилося показати маркер на карті. Усередині функції initMap () додаємо змінну для маркера:

// Створюємо маркер на карті var marker = new google.maps.Marker ({// Визначаємо позицію маркера position: {lat: 55.760186, lng: 37.618711}, // Вказуємо на якій карті він повинен з'явиться. (На сторінці адже може бути більше однієї карти) map: map, // Пишемо назву маркера - з'явиться якщо навести на нього курсор і трохи почекати title: 'Наш маркер: Великий театр'});

Тепер у нас є карта з маркером

Як додати подію при натисканні на карту або маркер в Google Maps

Також на клік по маркеру можна додати своє подія. У підсумковому коді сторінки ми це робити не будемо. Але робиться це ось так:

google.maps.event.addListener (marker, 'click', function () {document.location = 'http: //google.com';});

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

Більш докладно про маркер і можливості роботи з ним рекомендую подивитися в документації .

2.3 Установка власної іконки для маркера в Google Maps

Маркер встановили. Але він стандартний, і це зовсім не цікаво. Давайте замінимо його на свою іконку. Я знайшов одну підходящу іконку яку ми будемо використовувати.

В опис змінної з маркером, додам іконку.

// Створюємо маркер на карті var marker = new google.maps.Marker ({// Визначаємо позицію маркера position: {lat: 55.760186, lng: 37.618711}, // Вказуємо на якій карті він повинен з'явиться. (На сторінці адже може бути більше однієї карти) map: map, // Пишемо назву маркера - з'явиться якщо навести на нього курсор і трохи почекати title: 'Наш маркер: Великий театр, // Зазначимо свою іконку для маркера icon:' theatre_icon.png '});

Про більш складні значки - можна подивитися в документації .

3. Задаємо свої стилі оформлення для карти Google Maps

Прийшов час розфарбувати нашу карту. Надати йому особливого та неповторного вигляду. Робити ми це будемо з допомогою сервісу Snazzy Maps який має велику кількість скінів для Google карт. І дозволяє робити ось такі круті карти:

Я вибрав стиль карти який називається Blue water . На сторінці даного стилю можна знайти код для оформлення та скачати файл з прикладом - застосування такого стильового оформлення до карти Google Maps.

Стилі для оформлення карти додаємо в властивість styles яке ми вказуємо для змінної map - коли створюємо в ній об'єкт з картою.

Наводжу весь фрагмент коду:

// В змінної map створюємо об'єкт карти GoogleMaps map = new google.maps.Map (document.getElementById ( 'map'), {// При створенні об'єкта карти необхідно вказати його властивості // center - визначаємо точку на якій карта буде центрироваться center : {lat: 55.760186, lng: 37.618711}, // zoom - визначає масштаб. 0 - видно всю платнеу. 18 - видно будинки і вулиці міста. zoom: 18, // Додаємо свої стилі для відображення карти styles: [{ "featureType ":" administrative "," elementType ":" labels.text.fill "," stylers ": [{" color ":" # 444444 "}]}, {" featureType ":" landscape "," elementType ":" all "," stylers ": [{" color ":" # f2f2f2 "}]}, {" featureType ":" poi "," elementType ":" all "," stylers ": [{" visibility ":" off "}]}, {" featureType ":" road "," elementType ":" all "," stylers ": [{" saturation ": - 100}, {" lightness ": 45}]}, {" fe atureType ":" road.highway "," elementType ":" all "," stylers ": [{" visibility ":" simplified "}]}, {" featureType ":" road.arterial "," elementType ":" labels.icon "," stylers ": [{" visibility ":" off "}]}, {" featureType ":" transit "," elementType ":" all "," stylers ": [{" visibility ":" off "}]}, {" featureType ":" water "," elementType ":" all "," stylers ": [{" color ":" # 46bcec "}, {" visibility ":" on "}]} ]});

Тепер наша карта виглядає ось так:

4. Інформаційні вікна

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

  1. Створити саме вікно і контент всередині нього
  2. Зробити так щоб воно з'являлося по кліку на маркер.

Все це відбувається всередині функції initMap ()

4.1 Наведемо контент інфо-вікна:

// Створюємо наповнення для інформаційного вікна var contentString = '<div id = "content">' + '<div id = "siteNotice">' + '</ div>' + '<h1 id = "firstHeading" class = " firstHeading "> Великий театр </ h1> '+' <div id =" bodyContent "> '+' <p> Державний академічний Великий театр Росії, або просто Великий театр - один з найбільших '+' в Росії і один з найзначніших в світі театрів опери і балету. </ p> '+' <p> <b> Веб-сайт: </ b> <a href="http://www.bolshoi.ru/" target="_blank"> bolshoi.ru </a> '+' </ p> '+' </ div> '+' </ div> ';

4.2 Створимо інфо-вікно

// Створюємо інформаційне вікно var infowindow = new google.maps.InfoWindow ({content: contentString, maxWidth: 400});

4.3 Робимо так щоб при натисканні на маркер - з'являлося інфо-вікно

// Створюємо прослуховування, при натисканні на маркер - відкрити інфо-вікно infowindow marker.addListener ( 'click', function () {infowindow.open (map, marker);});

Тепер карта з інфо-вікном виглядає наступним чином:

Також можна прибирати стандартні елементи управління з карти, вмикати / вимикати потрібні й непотрібні, і навіть створити свої. Опис всього цього ви знайдете в документації .

готова карта

Готову вийшла карту і код можна подивитися нижче або на codepen .

See the Pen Google Map by Yurij ( @rightblog ) on CodePen .18493

Посилання по темі:

Документація Google Maps JavaScript API

Освоюємо Google Maps API

Google Maps: переміщення карти і маркерів

Com/maps / api / js?

Новости