Лого www.SiteHere.ru

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

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

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

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

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

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

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

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

HTML КОД
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_КЛЮЧ":

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

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

Javascript часть

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

JAVASCRIPT КОД
1
2
3
var latitude = 53.356525,
    longitude = -6.253810,
    map_zoom = 18;

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

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

JAVASCRIPT КОД
1
var marker_url = 'img/icon-location.png';

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

Маркер Google Maps

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

HTML КОД
1
2
3
var main_color = '#007148',
    saturation_value= -1,
    brightness_value= 1;

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

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

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

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

Источник

Успехов!

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

Пользовательские стили на картах Google — индивидуальное оформление Google Maps 5.00/5 (100.00%) 7 голос(ов)

Понравилась статья - расскажи друзьям! :)

19 комментариев к записи
  • Виталий

    Согласен, очень часто при верстке сайтов приходится стилизировать карту под дизайн, полезный материал!!! 

     
  • adrin

    А как вставлять при этом саму карту забыли?

     
    • Юрий Немец

      Всё сказано в статье. Смотрите первый этап "Структура".

       
  • Георгий

    Доброго времени суток, а как сделать несколько флажков на одной карте?

     
    • Юрий Немец

      Здравствуйте, Георгий!

      В файле main.js смотрите на 201-ю строку. Там идет "нанесение" флажка на карту, где указывается стиль и координаты флажка.

      Таким же образом можно добавить сколь угодно много флажков.

       
      • Георгий

        спасибо, разобрался.) замечательная карта

         
  • Игорь

    Жаль что из-за долготы и широты это прикрутить некуда, а так бы например к сайту с продажами квартир,животных или еще чего, пользователь пишет объявление и свой адрес а он высвечивается на карте.

     
    • Юрий Немец

      Так нужно лишь определить местонахождение пользователя. Для этого все возможности есть в Google Maps API.

       
  • Виталий

    Подскажите, как сделать это в WP?

     
    • Юрий Немец

      Виталий, процесс установки ничем не отличается от обычного HTML сайта. Скрипты к скриптам, стили к стилям и так далее.

       
  • Сергей

    Круто, но я немного не разобрался с API, выходит карту локально не потестить, нужен только конкретно рабочий домен? Просто заливаю на бесплатный хостинг а карты нету, пробовал 3 разных API и даже ваш, не работает карта( Думаю многим будет интересно узнать что не так.

     
    • Юрий Немец

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

       
  • Сергей

    Спасибо большое за ответ)

     
  • Алексей

    Здравствуйте, а не подскажите в сети русскоязычный материал по картам, интересует трекинг машин на карте и написание плагинов для работы с картами в этом направлении ? 

     
    • Юрий Немец

      Алексей, не ищите русскоязычный, такие вещи быстро появляются на западе, там и нужно это искать. А если найдете что-то на русскоязычном, то, значит, этот функционал есть на каждом 3-м сайте.

       
  • Алексей

    Юрий спасибо за совет 1

     
  • anxieter

    Спасибо за нужную информацию. Не могу понять — почему же не хочет отображаться на мобильном. Пишет только "Oops! Something get wrong" c восклицательным значком. На обычном компьютере все хорошо, а мобильник не хочет…

     
  • Игорь

    а как вывести карту на английском?

     
  • Игорь

    и да — не работает на смартфонах

    на андроиде карта не отображается

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *