Простая карта Yandex

Для создания простой карты без каких-либо меток, линий, выделенных областей потребуется:

  • Создать блок, в котором будет находиться карта
  • Создать скрипт карты с Вашим ключем
  • Создать скрипт, который привяжет карту к Вашему блоку

Итак, по порядку.

Создаем блок, в котором будет отображаться карта

Код HTML
<div id="YMapsID" style="width:660px;height:400px"></div>

В этом блоке будет отображаться Ваша карта и все элементы, которые будут прописаны ниже.

Создаем скрипт карты с Вашим ключем.

Код HTML
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AN4-7k0BAAAANExyUgIADWWJq3ntHG_xA7uA_cGz2ExhXRkAAAAAAAAAAAC5
ptlcr3b6usM8Vf3a0oZyXDQnww==" type="text/javascript"></script>

Где AN4-7k0BAAAANExyUgIADWWJq3ntHG_xA7uA_cGz2ExhXRkAAAAAAAAAAAC5ptlcr3b6usM8Vf3a0oZyXDQnww== - это Ваш персональный ключ, этот ключ выдается для каждого сайта индивидуально. Получить этот ключ можно, пройдя по ссылке. По этому ключу скрипт карты будет определять Ваш сайт.

Создать скрипт, который привяжет карту к Вашему блоку

Код HTML
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10); // Установка центра карты и масштаба

map.setType(YMaps.MapType.SATELLITE); // Установка типа карт (схема - MAP, спутник - SATELLITE, гибрид - HYBRID)

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

//map.addControl(new YMaps.TypeControl()); // Устанавливает на карту значки схема, спутник, гибрид
//или устанавливаем на карту выпадающий списое
var typeControl = new YMaps.TypeControl([YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID], [0,1,2]); map.addControl(typeControl)

map.addControl(new YMaps.ToolBar()); // Устанавливает на карту значки рука, увеличить, линейка

map.addControl(new YMaps.Zoom()); // Устанавливает на карту полосу увеличения/уменьшения
//или
//map.addControl(new YMaps.SmallZoom()); // Устанавливает на карту полосу увеличения/уменьшения тольео значки + - без полосы

map.addControl(new YMaps.MiniMap()); // Устанавливает на карту блок с уменьшенным изображением карты - обзорной картой
map.addControl(new YMaps.ScaleLine()); // Устанавливает на карту полоса в нижнем правом углу для измерения расстояния без использования ленейки

map.addControl(new YMaps.SearchControl()); // Устанавливает на карту поиск по карте
});
</script>

Пример использования



Источник
Вверх