dir.by  
  Поиск  
Программирование, разработка, тестирование
Комания Yandex. Yandex сервисы для Web сайта (счетчик посещений, карта улиц, переводчик языков, контекстная реклама, ...)
Как добавить Yandex карту на сайт
  Посмотрели 6360 раз(а)    
 Как добавить Yandex карту на сайт 
последнее обновление: 5 сентября 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>
Пример смотрим, тестируем
Вариант 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>
Пример смотрим, тестируем
 
← Предыдущая тема
Как добавить счетчик посещений (Yandex Метрика) на свой сайт
 
Следующая тема →
Yandex Translate API (переводчик языков)
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

Картинки

Объявления
Объявления
Комания Yandex. Yandex сервисы для Web сайта (счетчик посещений, карта улиц, переводчик языков, контекстная реклама, ...)  
Yandex Метрика (информация о посещении сайта)
Информация о посещении сайта (сколько посещений, с каих устройств) Yandex Метрика
Как добавить счетчик посещений (Yandex Метрика) на свой сайт
Yandex Карта (города, улицы)
Как добавить Yandex карту на сайт
Yandex Translate
Yandex Translate API (переводчик языков)
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 (описание)

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