www.Litecode.ru – Сборник рецептов для создания сайтов

API Yandex maps

ГлавнаяJavaScript → API Yandex maps

Представляю рабочий вариант нанесения меток на Яндекс карту с помощью API Yandex maps. Теорией и доками грузить не буду, это есть здесь. Сразу к делу.

Все что нужно - получить ключ для api и сгенерить на сервере массив с данными с помощью php, perl или чем больше нравится. Для примера нанесем на карту три станции Московского метро.

<script src="http://api-maps.yandex.ru/1.1/?key=AJkxVU4BAAAAZWEmKQIAU9OGD8r8blp1BPa7JfOZibHdG6MAAAAAAAAAAAA7yH4p5S8w76I0FdEnksadeqQATA==&modules=pmap&wizard=constructor" type="text/javascript"></script>
<script type="text/javascript">
  YMaps.jQuery(window).load(function () {
      var map = new YMaps.Map(YMaps.jQuery("#YMapsID-1341")[0]);
      map.setCenter(new YMaps.GeoPoint(37.64,55.76), 10, YMaps.MapType.MAP);
      
      map.addControl(new YMaps.ToolBar());
      map.addControl(new YMaps.Zoom());
      map.addControl(new YMaps.ScaleLine());
      map.addControl(new YMaps.TypeControl([
          YMaps.MapType.MAP,
          YMaps.MapType.SATELLITE,
          YMaps.MapType.HYBRID
      ], [0, 1, 2]));
      
      var s = new YMaps.Style();
      s.iconStyle = new YMaps.IconStyle();
      s.iconStyle.size = new YMaps.Point(27, 26);
      s.iconStyle.href = '/img/map/house.png';
      s.balloonContentStyle = new YMaps.BalloonContentStyle(
         new YMaps.Template('<div style="width:200px;"><h3 style="padding:0;">$[name]</h3>$[description]</div>')
      );
      
      var Data = {
          1:{coord:[37.601618,55.752121],label:'метро Арбатская',descr:'Станция метро Арбатская, Филевская линия',url:'http://yandex.ru/yandsearch/?text=metro+arbatskaya'},
          2:{coord:[37.817969,55.715682],label:'метро Выхино',descr:'Россия, Москва, Таганско-Краснопресненская линия',url:'http://yandex.ru/yandsearch/?text=vyhino'},
          3:{coord:[37.587344,55.898376],label:'метро Алтуфьево',descr:'Россия, Москва, Серпуховско-Тимирязевская линия',url:'http://yandex.ru/yandsearch/?text=altufievo'}
          };
      
      for( p in Data ) {
          if(  Data[p].coord[0] != undefined &&  Data[p].coord[0] != undefined ) {
              
              placemark = new YMaps.Placemark(new YMaps.GeoPoint( Data[p].coord[0], Data[p].coord[1]), {style:s} );
              
              placemark.name = '<a href="'+ Data[p].url + '" target="_blank">' + Data[p].label + '</a>';
              placemark.description = Data[p].descr;
              map.addOverlay( placemark );
          }
      }
  });
</script>
<div id="YMapsID-1341" style="width:100%;height:400px;"> </div>
 

Сохраняем, жмем ctrl+f5. Смотрим.