Простая вставка Яндекс и Google карт на страницу

%maps{service_name, map_id, options_name}

с уникальным id.

Атрибут id формируется по правилам:

 id = 'google_maps_' + map_id
 id = 'yandex_maps_' + map_id

Пример вызова:

%maps{google}
 ...
%maps{google, map1}
 ...
%maps{yandex, mymap, test.simple}
 ...

Базовые настройки

Для использования вставки %MAPS достаточно указать массив нескольких основных параметров карты в настройке CMS.Vars.

Базовая структура массива представлена ниже.

 properties = {
     ...
 }
 markers = {
     ...
 }
 windows = {
     ...
 }

Основные поля:

• properties - описывает настройки поведения карты, внешнего вида и т.д.
• markers - описывает помещаемые на карту маркеры
• windows - описывает всплывающие окна

Каждое из полей не является обязательным и может быть пропущено.

Поле properties

 properties = {
     center = {
         x = 54.20
         y = 37.65
     }
     zoom = 3
     type = hybrid
     style = height: 300px; width: 300px;
 }

Главными здесь являются параметры:

• center - массив, содержащий координаты точки центра создаваемой карты; необязателен
• zoom - масштаб карты; изменяется от 0 (наибольший масштаб) до примерно 19; необязателен
• type - тип карты; необязателен
• style - стиль элемента div, в котором будет отображаться карта; необязателен

Дополнительно можно указать:

• lang - кодовое обозначение используемого языка, например, ru_RU для Яндекс.Карт
• key - ключ для Яндекс.Карты, который будет использован при выводе данной вставки

Координаты центра карты (как любые другие координаты) описываются в формате {x = 'широта', y = 'долгота'} и соответствуют географическим с небольшой разницей в том, что границы карты по долготе доходят примерно до ±85°.

Тип карты принимает значения из набора {roads, satellite, hybrid} - карта дорог, карта со спутника и совмещённая. Для Яндекс.Карт они соответствуют типам "Схема", "Спутник" и "Гибрид". Для

Google Maps — "MapTypeId.ROADMAP", "MapTypeId.SATELLITE" и "MapTypeId.HYBRID".

Также в качестве типа можно указать специфические publicMap("Народная карта") для Яндекса и terrain(карта рельефа) для Google.

Стиль можно прописать как здесь (и он будет вставлен непосредственно в атрибут style), так и в таблице стилей для id элемента.

Поле markers

 markers = {
     marker1 = {
         position = {
             x = 54.2
             y = 37.6
         }
     }
     marker3 = {
         position = {
             x = 40
             y = 50
         }
     }
 }

Поле является массивом маркеров, главной опцией здесь будет position — положение маркера в географических координатах, обязательно к заполнению.

Поле windows

 windows = {
     one = {
         marker = marker1
         content = <div class="logo" style="width: 140px; height: 80px; background-image: url(/files/_assets/images/logo.gif)"></div>
     }
     three = {
         content = Маркер №3
         position = {
             x = 51
             y = 51
         }
     }
 }

Поле является массивом всплывающих окон.

Основные параметры:

• content - содержание окна; может быть и в виде разметки; (обязателен).
• marker / position - привязка окна к маркеру или к конкретной точке на карте; (обязателен).

Всплывающее окно, будучи привязанным к маркеру, закрыто и открывается по нажатию на маркер. В другом случае оно будет открытым сразу.

Замечание: Яндекс.Карты не позволяет одновременно показывать более одного всплывающего окна. Поэтому отображаться будет только последнее открытое. Также, если размер окна превышает размер div'а, в котором находится карта, то появятся полосы прокрутки. За этим нужно следить самостоятельно, например, задавая ширину и высоту вложенных элементов поля content , как в примере выше.

Приложение A. Расширенные настройки карт

Все настройки описанные ниже являются необязательными.

Полная структура массива настроек выглядит так:

 properties = {
     ...
 }
 controls = {
     ...
 }
 markers = {
     ...
 }
 windows = {
     ...
 }
 layouts = {
     ...
 }

Для большего управления внешним видом, поведением карт и объектов на них существуют дополнительные параметры. Рассмотрим их далее.

Поле properties

 properties = {
     ....
     lang = ru
     states = {
         drag = false
         scroll_zoom = true
         dbl_click_zoom = false
     }
     ....
 }

Доступны 2 параметра:

• lang - язык карты
• states - состояния или настройки поведения карты

Для Google Maps язык определяется тот, который используется в ярлыках фрагментов карты. Следует отметить, что данный параметр поддерживается только некоторыми фрагментами карт стран. Если запрошенный язык не поддерживается набором фрагментов, используется язык, установленный по умолчанию.

Сервис Яндекс.Карты на данный момент поддерживает лишь 4 языка: русский, украинский, английский и турецкий. Для них надо указывать аналогичные коды: ru, uk, en, tr. В настоящее время турецкий язык названий геообъектов поддерживается только для карты Турции.

Настройки поведения определяют, как будет реагировать карта на действия пользователя:

• drag - возможность перетаскивать карту мышкой
• scroll_zoom - масштабирование при скроллинге
• dbl_click_zoom - масштабирование при двойном клике по карте

Поле controls

 controls = {
     scale = large
     scaleLine
     mapType
     miniMap
 }

В поле controls можно указать элементы управления, доступные на карте:

• scale - управление масштабом
• scaleLine - линейка масштаба
• mapType - управление типом карты
• miniMap - показ миникарты

Это стандартные элементы управления Яндекс.Карт и Google Maps, они указываются простым перечислением. Кроме того для элемента управления масштабом можно определить размер large, или small, или оставить пустым.

В последнем случае сервис Google Maps будет автоматически устанавливать размер в зависимости от размеров карты, а в Яндекс.Картах будет установлено значение small.

Поле markers

 markers = {
     marker1 = {
         ....
         title = Первый маркер
         color = purple
         icon ={
             href = http://google.com/mapfiles/ms/micons/water.png
             size = {
                 x = 32
                 y = 32
             }
             shift = {
                 x = -7.5
                 y = 15
             }
         }
         draggable
         ...
     }
 }

Поле markers позволяет настроить внешний вид маркеров:

• title - всплывающий при наведении текст
• color - цвет стандартного значка маркера
• icon - определение собственного значка маркера
• draggable - возможность перетаскивания маркера по карте

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

Поле color может принимать значения из набора {yellow, blue, green, lightblue, orange, pink, purple, red} и применяется только при использовании стандартного значка.

Поле icon содержит параметры собственного значка маркера:

• href - ссылка на изображение
• size - размер значка
• shift - смещение значка относительно местоположения маркера

Если не указан параметр href, то size и shift будут применены к стандартному значку.

Замечание: поле size работает по-разному в зависимости от сервиса. В Google Maps изображение обрезается, а в Яндекс.Картах — масштабируется.

Поля windows и layouts

 windows = {
     one = {
         ....
         layout = simple
         layout_insertions = {
             title = Ещё один маркер
             description = Это ещё один маркер!
             footer = Конец ещё одного маркера
         }
         ....
     }
 }
 layouts = {
   simple = <div id="window-content" style="font: 12px Arial, sans-serif;"><img src="http://www.gravatar.com/avatar/6a419425d1f62bff58964251e02190ba?s=48&amp;d=monsterid&amp;r=g">%{title}</br>%{description}<br>%{footer}</div><br>
 }

Возможна ситуация, когда на карте необходимо поставить много всплывающих окон, структура содержания которых идентична. Для этого надо описать шаблон оформления в массиве layouts и указать его название в поле layout окна.

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

 %{имя_параметра}

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

Замечание: при использовании шаблона поле content указывать необязательно.

Приложение B. Настройки по умолчанию

Для некоторых настроек определены значения по умолчанию:

 properties = {
     center = {
         x = 55.76
         y = 37.64
     }
     zoom = 7
     type = roads
     style = width: 600px; height: 300px;
     lang = ru
     states = {
         drag = true
         scroll_zoom = false
         dbl_click_zoom = true
     }
 }
 controls = {
     scale = large
     mapType
 }

Для маркеров применяется стандартный значок соответствующего сервиса.

Размер и смещение значка маркера по умолчанию для Google Maps:

 size = {
     x = 32
     y = 32
 }
 shift = {
     x = -16
     y = 32
 }

Для Яндекс.Карт:

 size = {
     x = 37
     y = 42
 }
 shift = {
     x = -18.5
     y = 42
 }

Приложение C. Примеры

Простая карта с маркерами:

 properties = {
     center = {
         x = 55.76
         y = 37.64
     }
     zoom = 9
     style = width: 500px; height: 300px;
 }
 markers = {
     m1 = {
         position = {
             x = 55.6
             y = 37.3
         }
     }
     m2 = {
         position = {
             x = 55.9
             y = 37.7
         }
     }
     m3 = {
         position = {
             x = 55.67
             y = 37.6
         }
     }
 }

Карта с шаблонизированными всплывающими окнами:

 properties = {
     center = {
         x = 55.76
         y = 37.64
     }
     zoom = 9
     style = width: 500px; height: 300px;
 }
 markers = {
     m1 = {
         position = {
             x = 55.6
             y = 37.3
         }
     }
     m2 = {
         position = {
             x = 55.9
             y = 37.7
         }
     }
     m3 = {
         position = {
             x = 55.67
             y = 37.6
         }
     }
 }
 windows = {
     w1 = {
         marker = m1
         layout = simple
         layout_insertions = {
             photo = http://maps.google.com/mapfiles/ms/micons/golfer.png
             title = Golfer
             content = Последняя версия Google Maps API разработана с использованием измененной архитектуры MVC. Изменения состояния объекта MVC (например, карты) обрабатываются с помощью сеттеров и геттеров определенного формата.
             date = 22.06.2012
         }
     }
     w2 = {
         marker = m2
         layout = simple
         layout_insertions = {
             photo = http://maps.google.com/mapfiles/ms/micons/plane.png
             title = Plane
             content = Яндекс.Карты — это поисково-информационный сервис, предоставляющий пользователям карты крупных городов, актуальные данные о пробках, схемы метро и другие возможности.
             date = 12.06.2012
         }
     }
     w3 = {
         marker = m3
         layout = simple
         layout_insertions = {
             photo = http://maps.google.com/mapfiles/ms/micons/police.png
             title = Police
             content = Google Maps API V3 разработан для быстрой загрузки и успешной работы в мобильных устройствах. В частности, мы уделили особое внимание разработке приложений для современных мобильных устройств.
             date = 17.03.2012
         }
     }
 }
 layouts = {
    simple = <div style="height: 100%; overflow: hidden; font-size: 12px;"><img src="%{photo}" style="float: left;"><div style="width: 200px; float: right;"><p><b>%{title}</b></p><div>%{content}</div><p>%{date}</p></div></div>
 }