Как вставить яндекс карту на сайт html

Добавим стили, чтобы карта выводилась на всю страницу.

1. <style>
2. body, html, #map<
3. width: 100%;
4. height: 100%;
5. padding: 0;
6. margin: 0;
7. position: absolute;
8. >
9. </style>

Сохраняем страницу и смотрим на результат!

Настраиваем Яндекс.Карты

Наша задача состоит в построении маршрута от точки А до точки В. Для этого нам необходима навигационная панель для ввода начальной и конечной точек. Добавим панель и кнопки масштабирования на карту, используя Яндекс.Карты API.

1. routePanelControl = new ymaps.control.RoutePanel( <
2. options: <
3. showHeader: true, //Показывать заголовок навигационной панели
4. title: ‘Проложить маршрут’, //Заголовок панели
5. allowSwitch: true, //Отображать кнопку для смены местами Откуда/Куда
6. maxWidth: ‘300px’, //Ширина панели (макс. 400px)
7. float: ‘left’ // Расположение в левой части карты
8. >
9. >),
10. zoomControl = new ymaps.control.ZoomControl( <
11. options: <
12. float: ‘right’, // Расположение в правой части карты
13. position: < //Координаты
14. top: 245, //расположения
15. right: 10 //кнопок зума
16. >
17. >
18. >);
19. myMap.controls.add(routePanelControl).add(zoomControl);

Теперь мы имеем уже рабочую версию карт и даже можем строить маршруты.

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

1. // Пользователь сможет построить только автомобильный маршрут.
2. routePanelControl.routePanel.options.set( <
3. types: ,
4. >);

Для удобства построения маршрутов можно указать в качестве точки отправления текущее положение пользователя. За это отвечает следующая строчка кода:

1. // Зададим координаты пункта отправления с помощью геолокации.
2. routePanelControl.routePanel.geolocate(‘from’);

Добавим информацию о пробках на карту:

1. // Создадим элемент управления “Пробки”.
2. var trafficControl = new ymaps.control.TrafficControl( < state: <
3. // Отображаются пробки “Сейчас”.
4. providerKey: ‘traffic#actual’,
5. // Начинаем сразу показывать пробки на карте (true) или после нажатия на кнопку (false)
6. trafficShown: false
7. >>);
8. // Добавим контрол на карту.
9. myMap.controls.add(trafficControl);
10. // Получим ссылку на провайдер пробок “Сейчас” и включим показ инфоточек.
11. trafficControl.getProvider(‘traffic#actual’).state.set(‘infoLayerShown’, true);

Получение информации об активном маршруте Яндекс.Карты

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

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

1. // Получим ссылку на маршрут.
2. routePanelControl.routePanel.getRouteAsync().then(function (route) <
3. // Зададим максимально допустимое число маршрутов, возвращаемых мультимаршрутизатором.
4. route.model.setParams(, true);
5. //Искать оптимальный маршрут с учетом пробок
6. route.model.setParams(, true);
7. // Повесим обработчик на событие построения маршрута.
8. route.model.events.add(‘requestsuccess’, function () <
9. var activeRoute = route.getActiveRoute();
10. if (activeRoute) <
11. activeRoute.balloon.open();
12. >
13. >);
14. >);

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

1. // Получим протяженность маршрута.
2. length = route.getActiveRoute().properties.get(“distance”), // Протяженность маршрута
3. time = route.getActiveRoute().properties.get(“duration”), // Время маршрута
4. blocked = route.getActiveRoute().properties.get(“blocked”), // Есть ли перекрытия на маршруте
5. tolls = route.getActiveRoute().properties.get(“hasTolls”), // Есть ли платные участки дороги
6. timeintraffic = route.getActiveRoute().properties.get(“durationInTraffic”); // Время с учетом пробок
7. activeRoute.balloon.open();
8. console.log(‘Протяженность маршрута ‘ + length.value); // Протяженность маршрута в метрах
9. console.log(‘Протяженность маршрута ‘ + length.text); // Протяженность маршрута в текстовом представлении
10. console.log(‘Время без пробок ‘ + time.value); // Время в секундах без учета пробок
11. console.log(‘Время без пробок ‘ + time.text); // Время в текстовом представлении без учета пробок
12. console.log(‘Время с пробками ‘ + timeintraffic.value); // Время в секундах с учетом пробок
13. console.log(‘Время с пробками ‘ + timeintraffic.text); // Время в текстовом представлении с учетом пробок
14. console.log(‘blocked’ + blocked); // На маршруте есть перекрытия дороги
15. console.log(‘tolls ‘ + tolls); // На маршруте есть платные участки дороги

Вывод информации о маршруте в собственное поле на карте

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

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

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

У вас должно получиться примерно так:

1. <div id=”map”>
2. <div id=”info”>
3. <div style=”padding-left: 25px; float:left” class=”text”>
4. <input type=”number” name=”fuel” id=”fuel” value=”40" /> литр/100км
5. <input type=”number” name=”price” id=”price” value=”45" /> руб/литр
6. </div>
7. <div id=”infotext”></div>
8. <div id=”infotextprice”></div>
9. </div>
10. </div>

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

Должно получиться вот так:

1. // Получим протяженность маршрута.
2. $(‘#info’).css(“display”, “block”); // Показываем наш блок с информацией
3. length = route.getActiveRoute().properties.get(“distance”), // Протяженность маршрута
4. time = route.getActiveRoute().properties.get(“duration”), // Время маршрута
5. blocked = route.getActiveRoute().properties.get(“blocked”), // Есть ли перекрытия на маршруте
6. tolls = route.getActiveRoute().properties.get(“hasTolls”), // Есть ли платные участки дороги
7. timeintraffic = route.getActiveRoute().properties.get(“durationInTraffic”); // Время с учетом пробок
8. var fuel = document.getElementById(“fuel”).value; // Считываем расход топлива из формы
9. var price = document.getElementById(“price”).value; // Считываем стоимость топлива из формы
10. var rashod = Math.round((length.value/100000)*fuel); // Считаем сколько топлива потратим
11. var money = Math.round(rashod*price); // Считаем сколько денег потратим на топливо
12. mydis.innerHTML=’’;
13. mydisprice.innerHTML=’’;
14. mydis.insertAdjacentHTML(“beforeend”, ‘Оптимальный маршрут составляет <strong>’ + length.text + ‘</strong><br />’);
15. mydis.insertAdjacentHTML(“beforeend”, ‘Время с учетом пробок <strong>’ + timeintraffic.text + ‘</strong><br />’);
16. mydisprice.insertAdjacentHTML(“beforeend”, ‘Примерные расходы топлива <strong>’ + rashod + ‘ л.</strong><br />’);
17. mydisprice.insertAdjacentHTML(“beforeend”, ‘Расходы на топливо <strong>’ + money + ‘ руб.</strong><br />’);
18. if (blocked)
19. if (tolls)
20. activeRoute.balloon.open();
21. console.log(‘Протяженность маршрута ‘ + length.value); // Протяженность маршрута в метрах
22. console.log(‘Протяженность маршрута ‘ + length.text); // Протяженность маршрута в текстовом представлении
23. console.log(‘Время без пробок ‘ + time.value); // Время в секундах без учета пробок
24. console.log(‘Время без пробок ‘ + time.text); // Время в текстовом представлении без учета пробок
25. console.log(‘Время с пробками ‘ + timeintraffic.value); // Время в секундах с учетом пробок
26. console.log(‘Время с пробками ‘ + timeintraffic.text); // Время в текстовом представлении с учетом пробок
27. console.log(‘blocked’ + blocked); // На маршруте есть перекрытия дороги
28. console.log(‘tolls ‘ + tolls); // На маршруте есть платные участки дороги

Теперь нам необходимо пересчитывать затраты при изменении значений в форме. Для этого напишем функцию recalc() и пропишем ее вызов в форме.

1. <script type=”text/javascript”>
2. function recalc() <
3. var mydis = document.getElementById(‘infotext’);
4. var mydisprice = document.getElementById(‘infotextprice’);
5. var fuel = document.getElementById(“fuel”).value;
6. var price = document.getElementById(“price”).value;
7. var rashod = Math.round((window.length.value/100000)*fuel);
8. var money = Math.round(rashod*price);
9. mydisprice.innerHTML=’’;
10. mydisprice.insertAdjacentHTML(“beforeend”, ‘Примерные расходы топлива <strong>’ + rashod + ‘ л.</strong><br />’);
11. mydisprice.insertAdjacentHTML(“beforeend”, ‘Расходы на топливо <strong>’ + money + ‘ руб.</strong><br />’);
12. >
13. </script>
14. <div style=”padding-left: 25px; float:left” class=”text”>
15. <input type=”number” name=”fuel” id=”fuel” value=”40" oninput=”recalc()” /> литр/100км
16. <input type=”number” name=”price” id=”price” value=”45" oninput=”recalc()” /> руб/литр
17. </div>

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

1. //Разрешаем перетаскивать точки между начальной и конечной точками
2. route.editor.start();

Теперь вы можете строить оптимальные маршруты с автоматическим расчетом затрат на топливо прямо на вашем сайте.

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

Всем привет! Сегодня, я хочу вам рассказать о том, как добавить на свой сайт карту от Яндекса. Конечно, сразу напрашивается вопрос, зачем это надо? Если ответить коротко, то это нужно, чтобы вас нашли. Другой вопрос, кому это нужно? Нужно это многим сайтам, поговорим обо всем этом ниже.

Кому это надо?

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

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

Как вставить Яндекс Карту на сайт.

Одним из крупнейших картографических сервисов в рунете, является – Яндекс Карты. Есть еще и другой, от компании Гугл. Но сегодня, будет разговор именно про Яндекс Карты.

Для установки Яндекс Карты, нужно получить код, а затем, полученный код, вставить в нужное место на сайте. И не важно, на какой платформе ваш сайт. Данная инструкция подойдет и для сайтов на html, и для wordpress и для любых других движков. Достаточно того, чтобы он поддерживал вставку скриптов, что на сегодняшний день, предоставляет практически любой платный хостинг (да и большинство бесплатных).

Для установки, вначале нужно перейти по ссылке — yandex.ru/map-constructor/

Кликните на Создать карту, затем, выберите имя карты, сохранить и продолжить.

Ну а дальше, можно выбрать тип карты, размер в пикселях, сразу же можно задать нужный масштаб, местоположение карты. Ну и нажать на кнопку – получить код карты.

Конструктор карт выдаст код карты, который останется просто добавить на свой сайт.

Полученный код карты, нужно вставить на ваш сайт. Если это просто сайт на HTML, то просто вставьте его в нужное место.

Или же, если к примеру, у вас сайт на популярной CMS WordPress, то вы можете установить его в код либо самой статьи и для этого, вам совсем не нужен какой либо плагин, но вставку нужно делать, в режиме «Текст»

либо, можно вставить в виджет.

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

Как разместить Яндекс-карту у себя на сайте

Один из самых простых способов создать и разместить карту на сайте — это воспользоваться конструктором карт Яндекса.

Пишем название и описание. Ставим метку на карте или ищем место по адресу. Как только все будет готово, жмем кнопку «Сохранить и продолжить». Настраиваем параметры отображения карты. Например, растянем ее по ширине и поменяем масштаб. Получаем код карты нажатием на одноименную кнопку.