dir.by  
Programming, development, testing
Комания Yandex. Yandex сервисы для Web сайта (счетчик посещений, карта улиц, переводчик языков, контекстная реклама, ...)
Как добавить Yandex карту на сайт
  Looked at 8107 times    
 Как добавить Yandex карту на сайт 
last updated: 5 September 2018
Вариант 1 (это новый, лучший вариант)
  Html     Создадим новый файл 1.html напишем код:
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript">
</script>

<div id='MyMap1' style='width:1px; height:1px;'>

<script type='text/javascript'>

     // Когда yandex библиотека загрузится, то вызовется моя функция initYMaps
     ymaps.ready(initYMaps);

     function initYMaps()
     {
          // создание Yandex карты
          var myMap = create_yandex_map('MyMap1', 640, 480)
    
          // добавляем 1-ую точку
          add_yandex_point(myMap, 27.458004, 53.907726, 'vvv');
    
          // добавляем 2-ую точку
          add_yandex_point(myMap, 27.458004, 53.997726, 'aaa');
    
          // указываем центр и zoom Yandex карты
          center_and_zoom_yandex_map(myMap, 27.458004, 53.952726, 11);
     }

     function create_yandex_map(map_id, width, height)
     {
          // get div
          var elemDiv = document.getElementById(map_id);
          if (elemDiv==null)
               return null;
          elemDiv.style.width = width;
          elemDiv.style.height = height;
         
          // create map
          var myMap = new ymaps.Map(map_id,
          {
               center: [0, 0], // default center
               zoom: 0 // default zoom
          });

          return myMap;
     }

     function add_yandex_point(myMap, latitud, longit, title)
     {
          // add label
          var myPlacemark = new ymaps.Placemark([longit, latitud],
               {
                    balloonContentHeader: title,
                    balloonContentBody: '',
                    balloonContentFooter: ''
               }
          );
          myMap.geoObjects.add(myPlacemark);
     }

     function center_and_zoom_yandex_map(myMap, latitud, longit, map_zoom)
     {
          if (map_zoom==0)
               map_zoom = 16;

          // set center & zoom
          myMap.setCenter([longit, latitud], map_zoom);
     }
</script>
Example we look, we test
Вариант 2 (старый вариант через API-ключ)
Чтобы добавить Yandex карту на сайт нужно:
1) зайти по ссылке http://api.yandex.ru/maps/form.xml и войти в Yandex
Результат
2) Написать имя сайта и нажать получить ключ
Результат
3) Написать код на html. Заменить MAP_API_CODE на ваш

Пример заменить MAP_API_CODE на
AHCLlVkBAAAAXDdyZQIAYcLDFHGFHGFHGHFGFHGHFHGHFGFHFGHGFHFGAADXresjnAiPZsWEskSwfH3BfBcUEg==

На каждый сайт yandex создает свой ключ вам нужно использовать свой API ключ.
  Html     Пример
<script src='http://api-maps.yandex.ru/1.1/index.xml?key=MAP_API_CODE&modules=pmap' type='text/javascript'></script>

<div id='my_map_element' style='width:100px; height:100px;'></div>

<script type='text/javascript'>
     function add_yandex_point(map_id, latitud, longit, title, map_zoom)
     {
          if (map_zoom==0)
               map_zoom = 16;

          // get div
          var elemDiv = document.getElementById(map_id);
          elemDiv.style.width = '640px';
          elemDiv.style.height = '480px';
         
          // create map
          var xmap = null;
          xmap = new YMaps.Map(elemDiv);
          xmap.addControl(new YMaps.SmallZoom());

          // add coordinate
          var points = new Array();
          points.push(new YMaps.GeoPoint(latitud, longit));

          // add title
          var titles = new Array();
          titles.push(title);

          var geocoder = new YMaps.Geocoder(new YMaps.GeoPoint(points[0].lat, points[0].lng), {results: 1});

          var bounds = new YMaps.GeoCollectionBounds(points);
          xmap.setCenter(bounds.getCenter(), map_zoom, YMaps.MapType.PMAP);

          xmap.openBalloon(points[0], titles[0]);
     }

     add_yandex_point('my_map_element', 27.53131665, 53.920020916, 'Привет'/*заголовок*/, 12/*map zoom*/);
</script>
Example we look, we test
 
← Previous topic
Как добавить счетчик посещений (Yandex Метрика) на свой сайт
 
Next topic →
Yandex Translate API (language translator)
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)

Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
Yandex Метрика (информация о посещении сайта)
Информация о посещении сайта (сколько посещений, с каих устройств) Yandex Метрика
Как добавить счетчик посещений (Yandex Метрика) на свой сайт
Yandex Карта (города, улицы)
Как добавить Yandex карту на сайт
Yandex Translate
Yandex Translate API (language translator)
Yandex Direct (контекстная реклама)
Yandex Direct (что такое контекстная реклама?)
Yandex Direct API (программный код для управления рекламными кампаниями)
Доступ к Yandex Direct API (тестовая среда)
Песочница (тестовые Компании) Yandex Direct API
Пример "Список комапний" php и Yandex Direct API (тестовая среда)
Доступ к Yandex Direct API
Создание Компании (на сайте direct.yandex.ru)
Финансовый токен
Рекламная сеть Яндекса (РСЯ)
Рекламная сеть Яндекса (описание) | как присоединиться | настроить
Добавляем Yandex рекламу на свой сайт (постер вертикальный с 2-мя объявлениями)
Добавляем Yandex рекламу на свой сайт (6 объявлений в линию, горизонтальные)
Добавить второй сайт в Рекламную сеть Яндекса
Yandex Webmaster (индексирование сайта, ссылки сайта внутренние и внешние и другое)
Что такое Yandex Webmaster (Яндекс Вебмастер ) ?
Как добавить Yandex Webmaster (Яндекс Вебмастер ) на свой сайт
Почта Yandex
Почта Yandex (описание)
Алиса говорящая колонка Yandex
Купил Яндекс колонку мини "Алиса" и хочу подключить (использую телефон Android или iPhone)
Колонка мини "Алиса" посмотреть оплату на сайте yandex (можно сменить план, способ оплаты)

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика