Пользовательские стили на картах Google — индивидуальное оформление Google Maps

Когда Вам необходимо указать на карте реальное месторасположение офиса либо какого-то объекта, то сервис Google Maps предоставляет Вам очень большой спектр возможностей. Очень часто что стиль карты, которую вставляют на сайт не подходит по стилю и цветовой гамме. Но этот сервис позволяет изменить стандартный вид карты, настроить насыщенность, яркость, добавить свою иконку маркера на карту и так далее.

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

• Оригинальный эффект для лендинга при прокрутке
• Полноэкранная прокрутка лендинга
• Создаем неповторимый дизайн лендинга — интерактивный дизайн лендинга

Демо карту можно посмотреть по этой ссылке:

Посмотреть примерСкачать

Практическая реализация

1 этап. Структура

Здесь нужен лишь один общий контейнер, в котором будет размещаться сама карта, кнопки увеличить/уменьшить и строка с адресом:

1
2
3
4
5
6

<section id="google-map">
    <div id="google-container"></div>
    <div id="zoom-in"></div>
    <div id="zoom-out"></div>
    <address>1 Plás Chnoc an tSamhraidh, Baile Átha Cliath, Ирландия</address> 
</section>

2 этап. Получаем API Key

Переходим на данную страницу и получаем ключ API — Get API Key.

Если непонятно как получить API ключ, тогда смотрите видео — ПЕРЕЙТИ К ВИДЕО.

Затем вставляем данный API ключ в HTML вместо слов "ВАШ_API_КЛЮЧ":

1

<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ"></script>

3 этап. Стили + обработка событий

Сейчас переходим непосредственно к главному файлу, где определяются все стили и события на карте, а именно к файлу main.js. И первым делом нам необходимо указать долготу и широту нашей точки на карте. Плюс к этому еще указываем начальный коэффициент увеличения:

1
2
3

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

Чтобы получить долготу и широту, Вам необходимо в нужном месте карты Google кликнуть правой кнопкой мыши, а затем нажать "Что здесь?". Внизу Вы увидите всплывающее окошко, где будет указана долгота и широта. Вам их необходимо перенести в данный файл.

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

1

var marker_url = 'img/icon-location.png';

В моем случае это зеленый флажок:

Следующим шагом определяем основной цвет, насыщенность и яркость карты:

1
2
3

var main_color = '#007148',
    saturation_value= -1,
    brightness_value= 1;

Просто изменяя значения, поэкспериментируйте и подберите тот вид карты, который Вас устроит.

Далее мы определяем стили для объектов на карте. К примеру, если мы хотим убрать обозначения дорог, но сами дороги оставить, то нам необходимо прописать 2 свойства:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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. Такая карта будет более лаконично смотреться в той же цветовой схеме, в которой находится вся страница.

Если Вам что-то непонятно — посмотрите видео, либо можете задать свой вопрос с помощью формы комментирования, которая находится ниже.

Источник

Успехов!

С Уважением, Юрий Немец