Как стилизовать Google Maps?

Question

[Алексей Верховцев]

Привет всем, проблема в том, что не знаю как стилизовать карту. У кого-то в статьях написано получить API KEY, у кого-то нет, у всех по разному, но ни у кого в примерах не вижу вывода карты, может я делаю что-то не так, чтобы добавить карту я просто выхожу на https://www.google.ru/maps, ввожу адрес и нажимаю Ссылка/код и он дает мне iframe, я вставляю его на сайт и всё хорошо, но во всех статьях, которые я прочитал, вообще нету iframe, т.к. откуда у них карта?? Может кто-нибудь дать маломальскую инструкцию, начиная с пункта как правильно вставить карту и заканчивая тем, что нужно просто весь фон карты поменять на синий прозрачный цвет (как будто есть карта прямоугольная, на неё наложили прямоугольник синий и задали ему прозрачность). Заранее спасибо

Answer 1

[Сергей delphinpro]

Начните отсюда https://developers.google.com/maps/documentation/j...

Прямо на этой странице внизу есть пример стилизованной карты.

Comments

[Алексей Верховцев]

Эм, так, что в документации, что в примере где указаны координаты карты, откуда это берется??? Может быть где-то при получении API KEY?? Плюс, когда нажимаю создать ключ апи, то он типа пытается создать сперва новый проект и пишет мне У вас нет прав на создание ключа API.

[Сергей delphinpro]

seftomsk:
Кординаты - center: {lat: -34.397, lng: 150.644} - это что по вашему? )
Ключи здесь создаются https://console.developers.google.com/apis/credentials

[Алексей Верховцев]

Сергей: погодите, но это как вручную вычислять что ли (я про координаты)?? Плюс надо же адрес где-то указать, чтобы марке появился, разве нет?

[Сергей delphinpro]

seftomsk: Определить координаты любой точки можно, например, здесь https://constructor.maps.yandex.ru/location-tool/
note: надеюсь, понятно, что географические координаты не зависят от сервиса (гугл, яндекс) :)

[Сергей delphinpro]

Про маркеры также все подробно написано в документации )
У гугла хорошая дока, ею просто нужно научиться пользоваться, научиться находить нужное.

[Алексей Верховцев]

Сергей: Да, сергей, я уже перед вашим ответом нашёл, спасибо, вы очень помогли, жаль нельзя просто карте придать типа наложение цвета, а нужно каждый элемент редактировать по цвету

[Сергей delphinpro]

seftomsk:

как будто есть карта прямоугольная, на неё наложили прямоугольник синий и задали ему прозрачность

Ну можно же "в лоб" :)
Наложите абсолютом поверх карты div с нужным цветом в rgba() и обязательно напишите ему свойство
pointer-events: none;
Правда IE научился понимать это свойство только с 11 версии :(

Или еще такой хак:
Обернуть карту в div с position:relative; overflow:hidden;
Внутри карта и еще один элемент. Этот элемент расположен абсолютно в левой верхней точке (вообще-то в любой угол) и имеет размеры 1*1. z-index чтобы быть поверх карты. и главное - тень
box-shadow: 0 0 0 10000px rgba(78, 78, 78, 0.5)
Тень не будет препятствовать тыкать на карту, но будет расположена поверх ее.

[Алексей Верховцев]

Сергей: Уже стилизовал, но спасибо за данный способ :)

Answer 2

[Александр]

https://developers.google.com/maps/documentation/j... — не благодари