We mark offices on Yandex.Maps automatically.

For large companies with a developed network of points of sales and add. offices is a typical situation when offices are closed, then opened, then moved ... Naturally, all this should be reflected on the company's website, and as quickly as possible, so as not to lose and offend existing and potential customers.
At the same time, as is usually the case, the information on the site is entered by employees with different levels of computer skills, and it may well be that they are still able to correct the address, but there is no longer a label on the card.

Thanks API Yandex.Maps, we can win it.


')
At once I will say that I am not a programmer, so the code below will not be perfect, and any corrections and comments are welcome. But suddenly someone will help.

In my case, the situation was complicated by the inability to make changes to the site engine, the only thing that was available at that time was a visual editor with support for JavaScript.

The task was to change the information quickly and easily by replacing the address in the table or adding a new office using copy & paste.

The Yandex.Maps API and jquery tabs are used - the list of offices by default, in the second tab - the map. When you click on the location map increases and is centered at this point.

//









And HTML is still simpler:

 <div id = "tabs">
 <ul>
   <li> <a href="#fragment-1"> <span> list </ span> </a> </ li>
   <li> <a href="#fragment-2"> <span> on the map </ span> </a> </ li>

 </ ul>
 <div id = "fragment-1">
 <table id = "adresses" width = "600" border = "0">
    <tbody>
      <tr>
        <td width = "200"> <b> m. Transfiguration Square </ b> </ td>
        <td> 107023, Moscow, st.  Elektrozavodskaya, 27, p. 8 <br />
            (495) 799-97-99 <br />
        <a href = "#" onclick = "return ShowOnMap (this);"  class = "popup"> location map </a> </ td>

      </ tr>
      <tr>
        <td> <b> m. Komsomolskaya </ b> <br>
        working week: 9: 00—20: 00
        Saturday: 10: 00—18: 00
        </ td>
        <td> 107078, Moscow, Orlikov per., d. 5, p. 3 <br />

          (495) 799-97-99 <br />
          <a href = "#" onclick = "return ShowOnMap (this);"  class = "popup"> location map </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>

It turns out, we have achieved what we wanted - in the table there are just addresses and no problems with links on Yandex cards and with javascript for an inexperienced user.

How it all works can be found here .