Создаем собственные стили для карт Google | RUDEBOXСоздавая сайт я не раз сталкивался с пожеланиями клиента о выводе интерактивной карты в разделе контакты, просто позаимствованные карты в Google смотрятся не достаточно изящно и не подчеркивают стиль сайта. Ведь на данных картах всегда маркируются логотипы ее разработчика. Мы решили рассмотреть как можно использовать популярные карты, но при этом с адаптированным дизайном под свой вкус. С помощью небольших манипуляций мы сможем отредактировать все, включая цвета дороги, воды, подписей и придать цветовой оттенок самой карте.

 

Вы можете найти много интересных материалов для себя, а также бесплатные шаблоны и не только у наших партнеров ниже, попробуйте и не пропустите интересные предложения:

Кроме этого мы добавили маркер для демонстрации с помощью него и указанных координат мы будет отображать желаемое местоположение. И так, давайте приступим.

Шаг 1. Подключение карт

Нам необходимо подключить стандартные карты Google Maps, сделаем мы это с помощью следующей команды:

Здесь вопросов возникнуть не должно, далее начинается самое интересное.

Создаем собственные стили для карт Google | RUDEBOX

Шаг 2. Стили

Нам необходимо добавить собственные стили, для опознаваемых знаков, дорог, воды, проулков, и прочего:

Шаг 3. Маркер

Как Вы заметили в демонстрации присутствует стилизованный маркер который обозначает местонахождение, за сам маркер будет отвечать точечный рисунок в формате png, а вот его размеры необходимо указать в коде.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.