Пошаговая установка

1. Подключение скрипта карты

Добавьте на страницу следующий код:

<script
   type="text/javascript"
   src="http://maps.visicom.ua/api/2.0.0/map/world_ru.js"></script>
 
<div id="viewport" style="width: 740px; height: 580px;">
  <a id="visicom_copyright_link"
     href="http://maps.visicom.ua/">карта крыма</a>
</div>

Данный код подключает скрипт с нашего сервера и размещает элемент (viewport), в котором будет отображаться карта.

2. Загрузка карты

Следующий скрипт на вашей странице задаст начальный масштаб и центр карты

<script type="text/javascript">
 var map;
 function createVisicomMap() {
  map = new VMap(document.getElementById('viewport'));
  var point = {lng: 30.5112, lat: 50.4550};
  map.center(point, 5);
 }
</script>

Функция createVisicomMap() вызывается движком на этапе загрузки и инициализации объекта карты.

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

Масштабная линейка Visicom Maps имеет шкалу в 19 масштабов, с индексами от 0 (видно весь мир) до 18-ого (дом крупным планом).

Строка map.center(point, 5) задает центрирование в точке с координатами (30.5112, 50.4550) и индекс масштаба 5.

2. Установка точек

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

// Создание маркера
var marker = new VMarker({lng: 30.5114, lat: 50.4552});
// Задаем возможность перетаскивания
marker.draggable(true);
// Всплывающая подсказка
marker.hint('Всплывающая подсказка');
// Задаем заголовок и текст информационного окна
marker.info('<b>Привет, Мир!</b>');
// Добавляем маркер на карту
map.add(marker);
// Перерисовка карты
map.repaint();

2.1 Установка иконки для маркера

В следующем примере в конструктор маркера передается иконка:

var icon = new VMarkerIcon(24, 24, 
    "http://maps.visicom.ua/common/icons/poi/tennis.png");
var marker = new VMarker( { lng: 30.5114, lat: 50.4552 }, icon);
map.add(marker);
map.repaint();

3. Работа с сервисами

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

Внимание ! Для работы с сервисами необходима авторизация

3.1 Маршрут

Следующий пример расчитывает и отображает на карте автомобильный маршрут между двумя точками.

VMap.AUTH_KEY = "AUTHORITYKEY";
VRemoteCall.request("route",
  {lng: 30.5112, lat: 50.4550},
  {lng: 30.5212, lat: 50.4650},
  function callback(route) {
   map.add(route);
   map.repaint();
 }
);

3.1 Поисковая форма

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

Для установки поисковой формы, требуется подключение следующего скрипта:

<script type="text/javascript" src="http://maps.visicom.ua/api/2.0.0//services/address.js"></script>

<div id="searchWidget" style="width: 600px; height: 140px;">
</div>
<div id="viewport5" style="float: left; width: 600px; height: 200px;">
 <a id="visicom_copyright_link" href="http://maps.visicom.ua/">карта крыма</a>
</div>
<script type="text/javascript">
 
var map;
function createVisicomMap() {
   VMap.AUTH_KEY = "AUTHORITYKEY";
 
   map = new VMap(document.getElementById('viewport'));
   var point = {lng: 30.5112, lat: 50.4550};
   map.center(point, 15);
 
   var searchWidget = new VSearchWidget(map, document.getElementById('searchWidget'));
   searchWidget.show();
 }
</script>

В случае, если требуется расширить функционал поиска, можно воспользоваться сервисом Адрес либо более низкоуровневым XMLAPI.