Пример создания собственной карты на сайт. Яндекс Карты API 2.0

Пример создания собственной Яндекс карты для сайта используя API 2.0.

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

Результат можно увидеть на изображении, а рабочий пример в конце страницы.

Яндекс карта в серых тонах

 

Итак, создание карты состоит из следующих этапов:

1. Подключение компонентов  API 2.0 Яндекс.Карты.

2. Инициализация. 

3. Добавление произвольного маркера.

4. Добавление элементов управления.

5. Изменение цвета фона и элементов карты.

 

1. Подключение компонентов API  Яндекс.Карты.

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

<script src="https://api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script>

2. Инициализация карты.

Перед созданием карты нужны координаты. Их можно узнать, набрав адрес в сервисе Яндекс.Карты. Также стоит указать zoom - уровень масштабирования.

// Инициализация карты
 ymaps.ready(init);
 
     function init () {
            
      //Центрирование и выбор масштаба карты
        var myMap = new ymaps.Map('map', {
             center: [55.757741, 37.624725],  //ввод координат
              zoom: 18                         // масштаб
         });
    };

3. Добавление произвольного маркера.

Для создание своего маркера необходимо: указать координаты, на которых будет центрирован маркер; хинт - подсказку; путь к изображению  и смещение, если необходимо передвинуть маркер относительно центра.

// Создание своей метки 
var myPlacemark = new ymaps.Placemark(
     // Координаты метки
     [55.757741,37.624725] , {
     // Свойства метки
      hintContent: 'Мой маркер'                //Подсказка при наведении на маркер
      }, {
          iconImageHref: 'http://delay-delo.com/demo/icono_metas.png',  // картинка иконки
          iconImageSize: [45, 45],                                      // размеры картинки
          iconImageOffset: [-70, -40]                                   // смещение картинки
}); 

4. Элементы управления.

Для удобства, необходимо добавить элементы управления. В моём примере есть лишь несколько элементов, если вам нужно больше, стоит посмотреть документацию в разделе элементы управления:

//Элементы управления    
 myMap.controls
      // Кнопка изменения масштаба
       .add('zoomControl')
      // Список типов карты
       .add('typeSelector')
      // Кнопка изменения масштаба - справа
       .add('smallZoomControl', { right: 5, top: 75 })
      // Стандартный набор кнопок
       .add('mapTools')    
      //Линейка масштаба
      .add(new ymaps.control.ScaleLine());

5. Изменение цвета фона и элементов карты.

Градиент получить можно используя стили css. Таким образом можно указать любой оттенок)

/*Размер карты*/
   #map { width:100%;height:500px }
/*Отображение карты в черно-белом цвете */
   .ymaps-glass-pane, .ymaps-layers-pane {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
    /* Firefox 3.5+ Chrome 19+ & Safari 6+ */
    -webkit-filter: grayscale(100%) !important;  
}

Полный листинг примера:

1<!DOCTYPE html>
<html>
<head><meta http-equiv=Content-Type content='text/html; charset=utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
    <title>Своя Яндекс карта</title>
    <meta name="description" content="Своя Яндекс карта">
    <script src="js/jquery-3.1.1.min.js"   type="text/javascript"></script>     
    <script src="https://api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script>
    <script type="text/javascript">
        // Инициализация карты
        ymaps.ready(init);
 
        function init () {
            
            //Центрирование и выбор масштаба карты
               var myMap = new ymaps.Map('map', {
                    center: [55.757741, 37.624725],  
                    zoom: 18
                });
 
           // Создание своей метки 
                var myPlacemark = new ymaps.Placemark(
                // Координаты метки
                    [55.757741,37.624725] , {
                    // Свойства метки
                    hintContent: 'Мой маркер'                //Подсказка при наведении на маркер
                }, {
                    iconImageHref: 'http://delay-delo.com/demo/icono_metas.png',  // картинка иконки
                    iconImageSize: [45, 45],                                      // размеры картинки
                    iconImageOffset: [-70, -40]                                   // смещение картинки
                    });     
 
                // Добавление метки на карту
                myMap.geoObjects.add(myPlacemark);

                //Элементы управления    
                myMap.controls
                // Кнопка изменения масштаба
                    .add('zoomControl')
                    // Список типов карты
                    .add('typeSelector')
                    // Кнопка изменения масштаба - справа
                    .add('smallZoomControl', { right: 5, top: 75 })
                    // Стандартный набор кнопок
                    .add('mapTools')    
                    //Линейка масштаба
                   .add(new ymaps.control.ScaleLine());
        }
    
    </script>
  <style>
           /*Размер карты*/
           #map { width:100%;height:500px }
           /*Отображение карты в черно-белом цвете */
           .ymaps-glass-pane, .ymaps-layers-pane {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
    /* Firefox 3.5+ Chrome 19+ & Safari 6+ */
    -webkit-filter: grayscale(100%) !important;  
}
    </style>
        
</head>
<body>
  
    <h1 align="center">Своя Яндекс карта</h1>
     
    <div id="map"></div>
      
</body>
</html>

Это всё! Надеюсь что мой небольшой пример ответит на пару вопросов и продемонстрирует часть возможностей API Яндекс.Карты.

Демо

Прикреплённые файлы
A 14 ноября, 2020

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

Оставить комментарий

Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.

Похожие материалы