Для крупных компаний с развитой сетью точек продаж и доп. офисов типичная ситуация, когда офисы то закрываются, то открываются, то переезжают… Естественно, это все должно отражаться на сайте компании, и как можно быстрее, чтобы не потерять и не обидеть существующих и потенциальных клиентов.
При этом, как обычно и бывает, информацию на сайт вносят сотрудники с разным уровнем владения компьютером, и вполне может быть так, что адрес исправить они еще в состоянии, но вот вставить метку на карту — уже нет.
Спасибо API Яндекс.Карт, мы можем это победить.
Сразу скажу, я не программист, поэтому код ниже будет не идеален, и всякие поправки и замечания приветствуются. Но вдруг кому поможет.
В моем случае ситуация осложнялась невозможностью внесения изменений в движок сайта, единственное что было доступно на тот момент — визуальный редактор с поддержкой JavaScript.
Задача была такой — чтобы изменять информацию можно было быстро и просто, заменив адрес в таблице или добавив новый офис с помощью copy & paste.
Используется API Яндекс.Карт и вкладки jquery — списком офисы по-умолчанию, во второй вкладке — карта. При клике на схему проезда карта увеличивается и центруется по этой точке.
А в HTML все еще проще:
Получается, мы добились, чего хотели — в таблице просто адреса и никаких заморочек со ссылками на яндекс.картах и с javascript для неопытного пользователя.
Как это все работает можно посмотреть здесь.
При этом, как обычно и бывает, информацию на сайт вносят сотрудники с разным уровнем владения компьютером, и вполне может быть так, что адрес исправить они еще в состоянии, но вот вставить метку на карту — уже нет.
Спасибо 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 для неопытного пользователя.
Как это все работает можно посмотреть здесь.