Код для сайта yandex map – Конструктор карт Яндекса

Как добавить Яндекс-карту на сайт (Yandex maps)

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

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

Примечание. Один и тот же код может быть вставлен на одну страницу неограниченное число раз.

С помощью конструктора можно вставить два типа карт: интерактивную и статическую.

Для интерактивной карты конструктор формирует элемент script, который подгружает на страницу JavaScript-код для создания карты.

Как получить код:

  1. Перейдите в Конструктор Яндекс-карт.
  2. Введите адрес Вашего офиса или магазина в соответствующее поле и нажмите кнопку «Найти».
  3. Настройте карту по Вашему усмотрению и нажмите кнопку «Получить код».
  4. Скопируйте полученный код из соответствующего поля и вставьте его в разметку сайта.
Как добавить на сайт яндекс карту
Как добавить на сайт яндекс карту

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

Как установить карту на сайтКак установить карту на сайт

Как Вы могли заметить, в коде карты есть параметры, отвечающие за размеры окна карты: width (ширина)

и height (высота), – они показаны стрелками на скриншоте. Вы можете установить оптимальные для Вашего сайта значения (на Ваше личное усмотрение). Значения данных параметров указаны в пикселях (px). Если Вы желаете растянуть карту на всю ширину сайта, то парамерт width вместе с его значением надо просто удалить из кода. На скриншоте показана выделением часть кода, которую надо удалить для установки ширины карты, равной ширине сайта.

Яндекс-документация: Как добавить карту на сайт или в блог.

pixlpark.ru

JavaScript API — Подключение API — Технологии Яндекса

apikey *

Обязательный параметр.

API-ключ. Получить ключ можно в Кабинете разработчика.

lang *

Обязательный параметр.

Локаль. Задается в виде:

  • language — двузначный код языка. Указывается в формате ISO 639-1. Задает язык объектов на карте (топонимов, элементов управления).
  • region — двузначный код страны. Указывается в формате ISO 3166-1. Определяет региональные особенности, например единицу измерения (для обозначения расстояния между объектами или скорости движения по маршруту).

    Примечание. Для регионов RU, UA и TR расстояние показывается в километрах, для US — в милях.

На данный момент поддерживаются следующие локали:
  • lang=ru_RU;

  • lang=en_US;

  • lang=en_RU;

  • lang=ru_UA;

  • lang=uk_UA;

  • lang=tr_TR

    .

coordorder

Порядок задания географических координат при работе API.

Возможные значения:

  • latlong — [широта, долгота] — используется по умолчанию;

  • longlat — [долгота, широта].

load

Список загружаемых модулей.

Имена модулей перечисляются через запятую. Например, load=Map,Placemark,map.addon.balloon.

По умолчанию загружаются все компоненты API (load=package.full), однако в целях минимизации объема трафика, передаваемого клиентскому приложению, вы можете указать список конкретных сущностей API, с которыми работает ваше приложение.

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

load.

Компоненты также можно загружать «по требованию», используя функцию require.

Значение по умолчанию: package.full.

mode

Режим загрузки API.

Код API может быть загружен в упакованном виде для минимизации трафика и скорости исполнения в браузере (mode=release), а также в виде исходного кода (mode=debug).

Загрузка в виде исходного кода удобна для отладки JavaScript-компонентов — код всех загруженных компонентов доступен для просмотра. Кроме того, в этом режиме в консоль выводятся сообщения об ошибках и исключениях. При загрузке в упакованном виде эти сообщения не выводятся.

Значение по умолчанию: release.

csp

Включает режим использования CSP. Может принимать значение true. Подробнее см. Подключение API при использовании CSP.

ns

Пространство имен, в котором локализованы программные компоненты API.

По умолчанию все объекты принадлежат пространству имен ymaps (например, ymaps.Map). Если при загрузке API указать ns=myNameSpace, то объекты будут доступны уже как myNameSpace.Map.

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

Вы можете задать пустое значение ns. В этом случае API не будет создавать объектов в глобальной области видимости, и доступ к функциональности API получит только функция, указанная в параметре onload.

Значение по умолчанию:

ymaps.

onload

Имя функции, которую необходимо вызвать после того, как компоненты API будут загружены и готовы к использованию (callback). В эту функцию в качестве аргумента будет передан объект-неймспейс с функциональностью API.

Допускается использование вложенных пространств имен:

onload=myfunction

onload=myapp.dosmth

Пример использования приведен в таблице ниже.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *