Наши любимые дети

Сегодня понадобилось срочно откорректировать Яндекс-карту на одном из сайтов. Поэтому откладывать изучение API Яндекс-карт уже было нельзя, пришлось этим заняться.
Однако инструкция для разработчиков написана так, что больше уходит времени на то, чтоб понять, что они хотят сказать, чем на саму работу.
Поэтому исходя из сегодняшнего опыта - пошаговая инструкция для новичков-веб-разработчиков.
1. Регистрируемся на Яндексе.
2. Получаем API-ключ для Вашего сайта (указываем URL сайта в соответсвующей форме)
3. Подключаем скрипт на страницу - вставляем следующий код:
...
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ВАШ КЛЮЧ" type="text/javascript"></script>
...

4. Создаем карту с помощью конструктора карт на сайте Яндекса, вставляем полученный скрипт на страницу:

<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->
<script src="http://api-maps.yandex.ru/1.1/?key=ЗДЕСЬ ДОЛЖЕН БЫТЬ ВАШ API КЛЮЧ&wizard=constructor" type="text/javascript"></script>
<script type="text/javascript">
  YMaps.jQuery(function () {
  var map = new YMaps.Map(YMaps.jQuery("#YMapsID-1558")[0]);
  map.setCenter(new YMaps.GeoPoint(40.551776,64.545818), 11, YMaps.MapType.MAP);
  map.addControl(new YMaps.Zoom());
  map.addControl(new YMaps.ToolBar());
  map.addControl(new YMaps.TypeControl());
   
  function createObject (type, point, style, description) {
  var allowObjects = ["Placemark", "Polyline", "Polygon"],
  index = YMaps.jQuery.inArray( type, allowObjects),
  constructor = allowObjects[(index == -1) ? 0 : index];
  description = description || "";
   
  var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description});
  object.description = description;
   
  return object;
  }
  });
</script>

<div id="YMapsID-1558" style="width:450px;height:350px"></div>
<div style="width:450px;text-align:right;font-family:Arial"><a href="http://api.yandex.ru/maps/tools/constructor/" style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт</a></div>
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->

5. Создаем блок для размещения карты  

<div id="YMapsID-1558" style="width: 450px; height: 450px;"><a style="color:#1A3DC1" href="http://api.yandex.ru/maps/tools/constructor/">Создано с помощью инструментов Яндекс.Карт</a></div>

Обратите внимание на то, что должен быть указан  id="YMapsID-1558"

Карта готова.

Пример можно посмотреть на сайте Строительной экспертизы

Читайте также

Последние новости