Отмечаем офисы на Яндекс.Картах автоматически

Для крупных компаний с развитой сетью точек продаж и доп. офисов типичная ситуация, когда офисы то закрываются, то открываются, то переезжают… Естественно, это все должно отражаться на сайте компании, и как можно быстрее, чтобы не потерять и не обидеть существующих и потенциальных клиентов.
При этом, как обычно и бывает, информацию на сайт вносят сотрудники с разным уровнем владения компьютером, и вполне может быть так, что адрес исправить они еще в состоянии, но вот вставить метку на карту — уже нет.

Спасибо API Яндекс.Карт, мы можем это победить.



Сразу скажу, я не программист, поэтому код ниже будет не идеален, и всякие поправки и замечания приветствуются. Но вдруг кому поможет.

В моем случае ситуация осложнялась невозможностью внесения изменений в движок сайта, единственное что было доступно на тот момент — визуальный редактор с поддержкой JavaScript.

Задача была такой — чтобы изменять информацию можно было быстро и просто, заменив адрес в таблице или добавив новый офис с помощью copy & paste.

Используется API Яндекс.Карт и вкладки jquery — списком офисы по-умолчанию, во второй вкладке — карта. При клике на схему проезда карта увеличивается и центруется по этой точке.

// загружаем библиотеки









А в HTML все еще проще:

<div id="tabs">
<ul>
  <li><a href="#fragment-1"><span>списком</span></a></li>
  <li><a href="#fragment-2"><span>на карте</span></a></li>

</ul>
<div id="fragment-1">
<table id="adresses" width="600" border="0">
   <tbody>
     <tr>
       <td width="200"><b>м.Преображенская площадь</b></td>
       <td>107023, г. Москва, ул. Электрозаводская, д. 27 , стр. 8<br />
           (495) 799-97-99<br />
       <a href="#" onclick="return ShowOnMap(this);" class="popup">схема проезда</a></td>

     </tr>
     <tr>
       <td><b>м.Комсомольская</b><br>
       рабочая неделя: 9:00—20:00
       суббота: 10:00—18:00
       </td>
       <td>107078, г. Москва, Орликов пер., д. 5 , стр. 3<br />

         (495) 799-97-99<br />
         <a href="#" onclick="return ShowOnMap(this);" class="popup">схема проезда</a></td>
    </tr>
    
    .....

  </tbody>
</table>
</div>
<div id="fragment-2">
    <!-- show map -->
    <div id="YMapsID" style="width:600px;height:400px"></div>
</div>
</div>

<script type="text/javascript">
    var _tabs = $("#tabs").tabs();

    loadMap();

    $("#tabs").bind("tabsshow", function(event, ui) {
        if (ui.panel.id == "fragment-2") {
            map.redraw();
        } else {
            if (isSingleOffice) {
                map.addOverlay(places);
                map.closeBalloon();
                isSingleOffice = false;
            }
        }
    });
</script>

Получается, мы добились, чего хотели — в таблице просто адреса и никаких заморочек со ссылками на яндекс.картах и с javascript для неопытного пользователя.

Как это все работает можно посмотреть здесь.