Как добавить Яндекс-карту на сайт (Yandex maps)
Конструктор карт – простой в использовании веб-инструмент, позволяющий создавать различные схемы проезда и отмечать нужные объекты на карте. Данную карту затем можно разместить на своем сайте или в блоге.
Для размещения карты на странице достаточно вставить сформированную конструктором строку кода на ту страницу, где необходимо отобразить карту.
Примечание. Один и тот же код может быть вставлен на одну страницу неограниченное число раз.
С помощью конструктора можно вставить два типа карт: интерактивную и статическую.
Для интерактивной карты конструктор формирует элемент script
, который подгружает на страницу JavaScript-код для создания карты.
Как получить код:
- Перейдите в Конструктор Яндекс-карт.
- Введите адрес Вашего офиса или магазина в соответствующее поле и нажмите кнопку «Найти».
- Настройте карту по Вашему усмотрению и нажмите кнопку «Получить код».
- Скопируйте полученный код из соответствующего поля и вставьте его в разметку сайта.


Если Ваш сайт является копией нашего демонстрационного сайта demo.pixlpark.ru и Вы хотите заменить уже имеющуюся карту, например, на странице контактов, то зайдите в панель управления сайтом, откройте раздел CMS «Страницы сайта», найдите страницу «Контакты» и откройте ее для редактирования, затем перейдите в «Расширенные настройки страницы» (см. скриншот ниже) и в поле «Слайдер» вставьте полученный в конструкторе Яндекс-карт код вместо текущего.


Как Вы могли заметить, в коде карты есть параметры, отвечающие за размеры окна карты: width (ширина) и height (высота), – они показаны стрелками на скриншоте. Вы можете установить оптимальные для Вашего сайта значения (на Ваше личное усмотрение). Значения данных параметров указаны в пикселях (px). Если Вы желаете растянуть карту на всю ширину сайта, то парамерт width вместе с его значением надо просто удалить из кода. На скриншоте показана выделением часть кода, которую надо удалить для установки ширины карты, равной ширине сайта.
Яндекс-документация: Как добавить карту на сайт или в блог.
pixlpark.ru
JavaScript API — Подключение API — Технологии Яндекса
apikey * | Обязательный параметр. API-ключ. Получить ключ можно в Кабинете разработчика. |
| Обязательный параметр. Локаль. Задается в виде:
|
coordorder | Порядок задания географических координат при работе API. Возможные значения:
|
load | Список загружаемых модулей. Имена модулей перечисляются через запятую. Например, По умолчанию загружаются все компоненты API ( Примечание. package.full оптимизирован таким образом, чтобы подгружать функциональность в момент ее фактического использования, поэтому в большинстве случаев нет необходимости настраивать параметр Компоненты также можно загружать «по требованию», используя функцию require. Значение по умолчанию: |
mode | Режим загрузки API. Код API может быть загружен в упакованном виде для минимизации трафика и скорости исполнения в браузере ( Загрузка в виде исходного кода удобна для отладки JavaScript-компонентов — код всех загруженных компонентов доступен для просмотра. Кроме того, в этом режиме в консоль выводятся сообщения об ошибках и исключениях. При загрузке в упакованном виде эти сообщения не выводятся. Значение по умолчанию: |
csp | Включает режим использования CSP. Может принимать значение true. Подробнее см. Подключение API при использовании CSP. |
ns | Пространство имен, в котором локализованы программные компоненты API. По умолчанию все объекты принадлежат пространству имен Использование пространства имен позволяет избежать пересечения названий функций и прочих программных компонентов, используемых в API и пользовательском/стороннем коде. Вы можете задать пустое значение ns. В этом случае API не будет создавать объектов в глобальной области видимости, и доступ к функциональности API получит только функция, указанная в параметре Значение по умолчанию: |
onload | Имя функции, которую необходимо вызвать после того, как компоненты API будут загружены и готовы к использованию (callback). В эту функцию в качестве аргумента будет передан объект-неймспейс с функциональностью API. Допускается использование вложенных пространств имен:
Пример использования приведен в таблице ниже. |
onerror | Имя callback-функции, которая будет вызвана в случае ошибки загрузки API. В эту функцию в качестве аргумента будет передан объект, содержащий информацию об ошибке. |
tech.yandex.ru
[Примеры] Яндекс.Карты API (Yandex.Maps API)
var myMap;
var placemarkCollections = {};
var placemarkList = {};
// Список городов и магазинов в них
var shopList = [
{
‘cityName’: ‘Москва’,
‘shops’: [
{‘coordinates’: [55.72532368326033, 37.748675112058876], ‘name’: ‘Рязанский проспект, 6Ас21’},
{‘coordinates’: [55.701677873469, 37.57358050756649], ‘name’: ‘Ленинский проспект, 47с2’}
]
},
{
‘cityName’: ‘Санкт-Петербург’,
‘shops’: [
{‘coordinates’: [59.863210042666125, 30.37903938671841], ‘name’: ‘Будапештская улица, 36к2’},
{‘coordinates’: [59.99486277158917, 30.406505207030918], ‘name’: ‘проспект Непокорённых’}
]
}
];
ymaps.ready(init);
function init() {
// Создаем карту
myMap = new ymaps.Map(«map», {
center: [56, 37],
zoom: 8,
controls: [
‘zoomControl’
],
zoomMargin: [20]
});
for (var i = 0; i < shopList.length; i++) {
// Добавляем название города в выпадающий список
$(‘select#cities’).append(‘<option value=»‘ + i + ‘»>’ + shopList[i].cityName + ‘</option>’);
// Создаём коллекцию меток для города
var cityCollection = new ymaps.GeoObjectCollection();
for (var c = 0; c < shopList[i].shops.length; c++) {
var shopInfo = shopList[i].shops[c];
var shopPlacemark = new ymaps.Placemark(
shopInfo.coordinates,
{
hintContent: shopInfo.name,
balloonContent: shopInfo.name
}
);
if (!placemarkList[i]) placemarkList[i] = {};
placemarkList[i][c] = shopPlacemark;
// Добавляем метку в коллекцию
cityCollection.add(shopPlacemark);
}
placemarkCollections[i] = cityCollection;
// Добавляем коллекцию на карту
myMap.geoObjects.add(cityCollection);
}
$(‘select#cities’).trigger(‘change’);
}
// Переключение города
$(document).on(‘change’, $(‘select#city’), function () {
var cityId = $(‘select#cities’).val();
// Масштабируем и выравниваем карту так, чтобы были видны метки для выбранного города
myMap.setBounds(placemarkCollections[cityId].getBounds(), {checkZoomRange:true}).then(function(){
if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
});
$(‘#shops’).html(»);
for (var c = 0; c < shopList[cityId].shops.length; c++) {
$(‘#shops’).append(‘<li value=»‘ + c + ‘»>’ + shopList[cityId].shops[c].name + ‘</li>’);
}
});
// Клик на адрес
$(document).on(‘click’, ‘#shops li’, function () {
var cityId = $(‘select#cities’).val();
var shopId = $(this).val();
placemarkList[cityId][shopId].events.fire(‘click’);
});
codd-wd.ru