Создание собственной Яндекс.Карты на сайте

Карта на сайте служит проводником между вами и вашими клиентами/пользователями.

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

В данной статье рассмотрим 3 примера карт и научимся их создавать.

Хотелось бы начать с того, что существует два типа карт: статические (представлены в виде изображения) и интерактивные. Об интерактивных картах и поговорим.

Для создания интерактивных карт используется Яндекс API – программный интерфейс, с помощью которого можно установить Яндекс.Карты и необходимый инструментарий для работы с ними в своем веб-приложении или на сайте.

Пример 1

Первый и, наверно, самый простой пример. Когда на карте вместо стандартной метки Яндекс.Карт хотелось бы разместить логотип компании. (кликабельно)

На данной карте метка объекта была изменена на логотип компании. При наведении на логотип можно отображать необходимую нам информацию.

Добавлен функционал Яндекс.Пробки:

Рис.1 – Яндекс.Пробки

Слои:

Рис.2 – Слои на Яндекс.Карте с помощью API Карт

Указание и поиск необходимого адреса, геопозиционирование и масштабирование:

Карта состоит из html-кода, который нам нужен для вставки карты на сайт. Ну и собственно подключаемый JS-файл, который содержит запрограммированную нами информацию.

В рассматриваемом примере html-код для вставки на сайт:

<script src="расположение подключаемого файла.js" type="text/javascript"> </script>
<style type="text/css">
#map {
width: 100%; height: 100%; } </style>
<div id="map"> </div>

Код JS-файла:

ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.71136156901162,37.65276849999999],
zoom: 16 }),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
hintContent: 'Artox Media Digital Group ул.Ленинская Слобода 26, стр. 5' }, {
// Опции. Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: 'http://seo.artox-media.ru/local/img/logo.png',
// Размеры метки.
iconImageSize: [161, 25],
// Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки).
iconImageOffset: [-60, -15] });
myMap.geoObjects.add(myPlacemark); });

Пример 2

Во втором примере хотелось бы поговорить про интерактивные маркеры POI.

Теперь точки POI на карте стали интерактивными – при выборе откроется карточка с информацией об объекте. (кликабельно)

Следует заметить, что нововведение оказалось интересным и полезным. Теперь на карте можно сразу увидеть не только местоположение объекта, но и режим работы, номер телефона, адрес сайта, как добраться и отзывы.

Как сделать такую карту для своего сайта?

HTML-код для вставки на сайт остается без изменений:

<script src="расположение подключаемого файла.js" type="text/javascript"> </script>
<style type="text/css">
#map {
width: 100%; height: 100%; } </style>
<div id="map"> </div>

Код JS-файла:

function init() {
var myMap = new ymaps.Map('map', {
center: [55.71136156901162,37.65276849999999],
zoom: 18,
controls: [] });

// Создадим экземпляр элемента управления «поиск по карте» с установленной опцией провайдера данных для поиска по организациям.
var searchControl = new ymaps.control.SearchControl({
options: {
provider: 'yandex#search' }});
myMap.controls.add(searchControl);

// Программно выполним поиск определённой компании в текущей прямоугольной области карты.
searchControl.search('Artox Media Digital Group'); }
ymaps.ready(init);

Пример 3

В данном примере рассмотрим построение карты маршрутов. Часто бывает так, что пользователю нужно показать, как добраться до места от ближайшей остановки или станции метро. Конечно, можно разместить схему или изображение маршрута. Однако, это легко можно сделать с помощью Яндекс API Карт. (кликабельно)

На карте задано построение маршрута из определенной до указанной точки. Отображены маршруты, расстояние пешком, тип транспорта. Также можно отобразить время для пеших сегментов по клику на кнопку. При клике по маршруту отобразится структура маршрута (в данном случае "Пешком - На метро - Пешком"), общее расстояние и затраченное время:

Рис.4 – Новые балуны маршрутов API Карт

HTML-код для вставки карты на сайт без изменений:

<script src="расположение подключаемого файла.js" type="text/javascript"> </script>
<style type="text/css">
#map {
width: 100%; height: 100%; } </style>
<div id="map"> </div>

Код JS-файла:

function init () {
var multiRoute = new ymaps.multiRouter.MultiRoute({
referencePoints: [
[55.7182901653654,37.69726548703039], "Москва, ул.Ленинская Слобода 26, стр. 5"],
params: {
routingMode: 'masstransit' } }, {

// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
boundsAutoApply: true });

// Создаем кнопку.
var changeLayoutButton = new ymaps.control.Button({
data: { content: "Показывать время для пеших сегментов"},
options: { selectOnClick: true } });

// Объявляем обработчики для кнопки.
changeLayoutButton.events.add('select', function () {
multiRoute.options.set(
// routeMarkerIconContentLayout - чтобы показывать время для всех сегментов.
"routeWalkMarkerIconContentLayout",
ymaps.templateLayoutFactory.createClass('{{ properties.duration.text }}')); });
changeLayoutButton.events.add('deselect', function () {
multiRoute.options.unset("routeWalkMarkerIconContentLayout"); });

// Создаем карту с добавленной на нее кнопкой.
var myMap = new ymaps.Map('map', {
center: [55.71136156901162,37.65276849999999],
zoom: 16,
controls: [changeLayoutButton] }, {
buttonMaxWidth: 300 });

// Добавляем мультимаршрут на карту.
myMap.geoObjects.add(multiRoute); }
ymaps.ready(init);

Хочется добавить, что API Карт обладает огромным функционалом. Можно строить различные маршруты для различных видов транспорта без привязки к объектам (т.е. пользователь сам может задать откуда начать построение маршрута до вашей организации).

Выводы

Удобных и полезных карт вашему сайту!