Страница 1 из 1

Карты Google на свой вкус

СообщениеДобавлено: 20 мар 2016, 00:32
Ivan30
понадобилось мне изменить карты Google, полез ковырять API
рассказываю, как Google позволяет создать собственный вариант карт

скачиваем zmp
карту
Google_Styled_Maps_Wizard.zmp.zip
(2.3 KiB) Скачиваний: 328

или слой
Google_Styled_Maps_Wizard_Layer.zmp.zip
(2.35 KiB) Скачиваний: 239


запускаем SaSPlanet, включаем карту или слой и видим дефолтную карту Google

Изображение

идем сюда http://gmaps-samples-v3.googlecode.com/ ... index.html
слева панель Feature type

Изображение

выключил на ней все слои

справа панель Map Style, добавил на ней слой кнопкой Add

Изображение

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

Изображение

выбрал, что нужно, смотрю URL нужного мне тайла

Изображение

копирую из URL всё с цифры 256, вот такую строку

Код: Выделить всё
256!2m3!1e0!2sm!3i341009205!3m14!2sru-RU!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC52Om9mZixzLnQ6NnxzLmU6Z3xwLnY6b24scy50OjE3fHMuZTpnfHAudjpvbixzLnQ6MTd8cy5lOmx8cC52Om9u!4e0&token=75172


втыкаю сюда

Изображение

скачиваю, в примере слой

Изображение

накладываю

Изображение

пример простой, на деле возможности куда больше

Re: Карты Google на свой вкус

СообщениеДобавлено: 20 мар 2016, 23:53
zed
Вот тут описан на пальцах новый формат кодирования url: http://stackoverflow.com/questions/2280 ... oogle-maps

Могу добавить уточнение, что формат этот в общем случае известен - это явно Google Protobuffer, правда описания такой сериализации в строку мне что-то не удаётся найти. Если кто-то нагуглит доки, киньте ссылку.

Соответственно, у записей вида !1m5 буква m обозначает message, а цифра 5 - количество полей внутри этого месседжа (некоторые поля могут отсутствовать).

Пример разбора урла:
Код: Выделить всё
http://maps.google.com/maps/vt?pb=!1m5!1m4!1i6!2i34!3i20!4i256!2m3!1e0!2sm!3i341009073!3m9!2sru-RU!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=59241

Код: Выделить всё
http://maps.google.com/maps/vt?pb=
!1m5
    !1m4
        !1i
            6   // z
        !2i
            34  // x
        !3i
            20  // y
        !4i
            256 // tile size
    !2m3
        !1e
            0
        !2s
            m
        !3i
            341009073
    !3m9
        !2s
            ru-RU
        !3s
            US
        !5e
            18
        !12m1
            !1e
                47
        !12m3
            !1e
                37
            !2m1
                !1s
                    smartmaps
            !4e
                0
&token=59241

Далее, в качестве параметров в урле можно указывать стили (из примера в первом посте):
Код: Выделить всё
!1s
    styles
!2z
    cC52Om9mZixzLnQ6NnxzLmU6Z3xwLnY6b24scy50OjE3fHMuZTpnfHAudjpvbixzLnQ6MTd8cy5lOmx8cC52Om9u
!4e
    0

Поле !2z очень похоже на Base64 и после декодирования превращается вот в такую строку:
Код: Выделить всё
p.v:off,s.t:6|s.e:g|p.v:on,s.t:17|s.e:g|p.v:on,s.t:17|s.e:l|p.v:on

Тут тоже в общем случае всё более-менее понятно: через разделитель "|" идёт кастомизация стилей:
p.v:off - видимо, свойство visible устанавливается в off
s.t:6 - тип стиля (id?) для которого применяется настройка видимости

В общем-то, особой необходимости разбираться в кодировании стилей наверное не нужно, ведь гораздо проще всё делать мышкой, как описано выше. Но для понимания сути, думаю, полезно представлять как формируются данные url. Магия есть, но её тут не очень много.