Призначені для користувача стилі на картах google - індивідуальне оформлення google maps

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

Нижче знаходяться статті, де Ви можете вибрати цікаві ефекти при прокручуванні Вашої сторінки Лендінзі:

• Оригінальний ефект для Лендінзі при прокручуванні
• Повноекранна прокрутка Лендінзі
• Створюємо неповторний дизайн Лендінзі - інтерактивний дизайн Лендінзі

Демо картку можна подивитися за цим посиланням:

Подивитися прімерСкачать

практична реалізація

1 етап. структура

Тут потрібен лише один загальний контейнер, в якому розміщуватиметься сама карта, кнопки збільшити / зменшити і рядок з адресою:

123456

id="Google-map"gt;lt;div id="Google-container"gt; lt;/divgt;lt;div id="Zoom-in"gt; lt;/divgt;lt;div id="Zoom-out"gt; lt;/divgt;lt;addressgt; 1 Pl s Chnoc an tSamhraidh, Baile tha Cliath, Ірландіяlt;/addressgt;lt;/sectiongt;

2 етап. Отримуємо API Key

Переходимо на дану сторінку і отримуємо ключ API - Get API Key.

Якщо незрозуміло як отримати API ключ, тоді дивіться відео - ПЕРЕЙТИ До ВІДЕО.

Потім вставляємо даний API ключ в HTML натомість слів "ВАШ_API_КЛЮЧ":

1

lt;script src="Https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ"gt; lt;/scriptgt;

3 етап. Стилі + обробка подій

Зараз переходимо безпосередньо до головного файлу, де визначаються всі стилі і події на карті, а саме до файлу main.js. І в першу чергу нам необхідно вказати довготу і широту нашої точки на карті. Плюс до цього ще вказуємо початковий коефіцієнт збільшення:

123

var latitude = 53.356525,longitude = -6.253810,map_zoom = 18-

Щоб отримати довгота і широта, Вам необхідно в потрібній якої точки на карті Google натиснути правою кнопкою миші, а потім натиснути "Що тут?". Внизу Ви побачите спливаюче віконце, де буде вказана довгота і широта. Вам їх необхідно перенести в даний файл.

Далі вказуємо шлях до маркера, який знаходиться посередині.

1

var marker_url = `Img / icon-location.jpg`-

У моєму випадку це зелений прапорець:

Наступним кроком визначаємо основний колір, насиченість і яскравість карти:

123

var main_color = `# 007148`,saturation_value= -1,brightness_value= 1-

Просто змінюючи значення, поекспериментуйте і підберіть той вид карти, який Вас улаштує.

Далі ми визначаємо стилі для об`єктів на карті. Наприклад, якщо ми хочемо прибрати позначення доріг, але самі дороги залишити, то нам необхідно прописати 2 властивості:

+12345678910111213141516171819

var style= [{// Приховуємо позначення доріг на картіfeatureType: `Road.highway`,elementType: `Labels`,stylers: [{visibility: "Off"}]},{featureType: "Road.highway",elementType: "Geometry.fill",stylers: [{ hue: main_color },{ visibility: "On" },{ lightness: brightness_value },{ saturation: saturation_value }]}

Повний список всіх властивостей знаходиться тут - Google Maps javascript API V3.

V Детальна відео-інструкція

висновок

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

Якщо Вам щось незрозуміло - подивіться відео, або можете задати своє питання за допомогою форми коментування, яка знаходиться нижче.

джерело

Успіхів!