Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="googlemaps">
  <div id="map_canvas" style="width: 100%;
                              height: 600px">
  </div>
  <div id="hide1" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Москве:</p>
      <p class="cont_name"><em>Начальник управления:</em></p>
      <p class="cont_text"><em>ФИО:</em> Миронов Максим Анатольевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(915) 686-01-16</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Баранивская Елена Викторовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(985) 270-79-69</p>
      <p class="cont_adres"><em>Адрес:</em> Измайловский вал, д. 20с1</p>
    </div>
  </div>
  <div id="hide2" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Смоленске:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Елистратова Светлана Владимировна</p>
      <p class="cont_text"><em>Телефон:</em> 8(910) 787-51-97</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Коммунистическая, д. 8/5</p>
    </div>
  </div>
  <div id="hide3" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Туле:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Тарасова Наталья Викторовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(906) 620-40-69</p>
      <p class="cont_adres"><em>Адрес:</em> пл. Крестовоздвиженская, д. 1</p>
    </div>
  </div>
  <div id="hide4" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Калуге:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Капцова Светлана Сергеевна</p>
      <p class="cont_text" style="margin-top: 34px"><em>Телефон:</em> 8(910) 863-01-01</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Кирова, д. 21А</p>
    </div>
  </div>
  <div id="hide5" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Санкт-Петербурге:</p>
      <p class="cont_name"><em>Начальник управления:</em></p>
      <p class="cont_text"><em>ФИО:</em> Мерзлякова Роза Александровна</p>
      <p class="cont_text"><em>Телефон:</em> 8(911) 770-75-44</p>
      <p class="cont_text"><em>Телефон (городской):</em> 8(812) 305-26-12</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Фурштатская, д. 5</p>
    </div>
  </div>
  <div id="hide6" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Пскове:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Молдавская Светлана Юрьевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(911) 899-40-97</p>
      <p class="cont_adres"><em>Адрес:</em> Октябрьский пр., д. 23/25</p>
    </div>
  </div>
  <div id="hide7" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Калининграде:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Курыжко Олег Степанович</p>
      <p class="cont_text"><em>Телефон:</em> 8(952) 798-60-35</p>
      <p class="cont_adres"><em>Адрес:</em> Московский пр., д. 24</p>
    </div>
  </div>
  <div id="hide8" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Архангельске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Андреева Вера Владимировна</p>
      <p class="cont_text"><em>Телефон:</em> 8(909) 552-34-29</p>
      <p class="cont_adres"><em>Адрес:</em> Ломоносова пр., д. 137</p>
    </div>
  </div>
  <div id="hide9" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Ярославле:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Рузанова Анна Георгиевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(905) 637-59-16</p>
      <p class="cont_adres"><em>Адрес:</em> Ленина пр., д. 25</p>
    </div>
  </div>
  <div id="hide10" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Вологде:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Кузнецов Алексей Викторович</p>
      <p class="cont_text"><em>Телефон:</em> 8(921) 233-02-62</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Предтеченская, д. 33</p>
    </div>
  </div>
  <div id="hide12" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Ульяновске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Ганчина Светлана Александровна</p>
      <p class="cont_text"><em>Телефон:</em> 8(917) 050-10-93</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Гончарова, д. 40А</p>
    </div>
  </div>
  <div id="hide13" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Саратове:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Глушкова Светлана Юрьевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(903) 328-41-41</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Вавилова, д. 1/7</p>
    </div>
  </div>
  <div id="hide14" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Самаре:</p>
      <p class="cont_name"><em>Начальник управления:</em></p>
      <p class="cont_text"><em>ФИО:</em> Лутохин Михаил Юрьевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(927) 010-76-51</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Толстова Екатерина Владиславовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(927) 202-85-28</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Ново-Садовая, д. 305</p>
    </div>
  </div>
  <div id="hide15" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Пензе:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Неудахин Антон Игоревич</p>
      <p class="cont_text"><em>Телефон:</em> 8(987) 501-07-29</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Суворова, д. 81</p>
    </div>
  </div>
  <div id="hide16" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Нижнем Новгороде:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Антипина Ксения Валентиновна</p>
      <p class="cont_text"><em>Телефон:</em> 8(951) 913-46-86</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Сосков Алексей Павлович</p>
      <p class="cont_text"><em>Телефон:</em> 8(952) 473-79-63</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Октябрьская, д. 35</p>
    </div>
  </div>
  <div id="hide17" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Тольятти:</p>
      <p class="cont_name"><em>Начальник управления:</em></p>
      <p class="cont_text"><em>ФИО:</em> Лутохин Михаил Юрьевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(927) 010-76-51</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Толстова Екатерина Владиславовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(927) 202-85-28</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Юбилейная, д. 55</p>
    </div>
  </div>
  <div id="hide18" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Оренбурге:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Сальникова Светлнана Владимировна</p>
      <p class="cont_text"><em>Телефон:</em> 8(987) 848-03-22</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Володарского, д. 16</p>
    </div>
  </div>
  <div id="hide19" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Йошкар-Оле:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Чезганова Анна Николаевна</p>
      <p class="cont_text" style="margin-top: 34px;"><em>Телефон:</em> 8(987) 710-12-11</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Карла Маркса, д. 109Б</p>
    </div>
  </div>
  <div id="hide20" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Кирове:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Фоминых Андрей Анатольевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(953) 678-41-85 </p>
      <p class="cont_adres"><em>Адрес:</em> ул. Дерендяева, д. 25</p>
    </div>
  </div>
  <div id="hide21" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Казани:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Синельников Кирилл Юрьевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(987) 234-22-49</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Семенова Татьяна Николаевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(937) 773-31-02</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Бутлерова, д. 44</p>
    </div>
  </div>
  <div id="hide22" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Чебоксарах:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Афанасьев Владимир Петрович</p>
      <p class="cont_text"><em>Телефон:</em> 8(927) 863-30-56</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Карла Маркса, д. 22</p>
    </div>
  </div>
  <div id="hide23" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Волгограде:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Рыкунова Ирина Константиновна</p>
      <p class="cont_text"><em>Телефон:</em> 8(988) 492-90-36</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Коммунистическая, д. 40</p>
    </div>
  </div>
  <div id="hide24" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Воронеж:</p>
      <p class="cont_name"><em>Начальник управления:</em></p>
      <p class="cont_text"><em>ФИО:</em> Рогачев Максим Юрьевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(910) 280-84-93</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Таранин Алексей Викторович</p>
      <p class="cont_text"><em>Телефон:</em> 8(910) 340-47-03</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Платонова, д. 8</p>
    </div>
  </div>
  <div id="hide25" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Ростове-на-Дону:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Нефедова Инна Владимировна</p>
      <p class="cont_text"><em>Телефон:</em> 8(918) 518-91-31</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Буравцова Марина Васильевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(918) 574-28-22</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Текучева, д. 139/94</p>
    </div>
  </div>
  <div id="hide26" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Орле:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Алтухов Максим Александрович</p>
      <p class="cont_text"><em>Телефон:</em> 8(919) 208-82-24</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Брестская, д. 8</p>
    </div>
  </div>
  <div id="hide27" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Липецке:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Савченко Елена Александровна</p>
      <p class="cont_text"><em>Телефон:</em> 8(960) 148-66-13</p>
      <p class="cont_adres"><em>Адрес:</em> пл. Петра Великого, д. 3</p>
    </div>
  </div>
  <div id="hide28" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Краснодаре:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Жуваго Александр Александрович</p>
      <p class="cont_text"><em>Телефон:</em> 8(989) 198-75-36</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Горлова Анна Сергеевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(989) 297-04-19</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Красноармейская, д. 34</p>
    </div>
  </div>
  <div id="hide29" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Ставрополе:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Дадиян Мария Рафаэльевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(929) 856-88-86</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Шуст Александр Александрович</p>
      <p class="cont_text"><em>Телефон:</em> 8(918) 764-03-04</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Ленина, д. 361 каб. №303</p>
    </div>
  </div>
  <div id="hide30" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Белгороде:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Атаманова Ольга Викторовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(920) 596-00-00</p>
      <p class="cont_adres"><em>Адрес:</em> Гражданский пр., д. 52</p>
    </div>
  </div>
  <div id="hide31" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Новороссийске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Маляренко Денис Николаевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(918) 996-56-64</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Советов, д. 14</p>
    </div>
  </div>
  <div id="hide32" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Сочи:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Лаврухин Алексей Алексеевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(918) 008-86-61</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Войкова, д. 2</p>
    </div>
  </div>
  <div id="hide33" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Екатеринбурге:</p>
      <p class="cont_name"><em>Начальник управление:</em></p>
      <p class="cont_text"><em>ФИО:</em> Панов Денис Владимирович</p>
      <p class="cont_text"><em>Телефон:</em> 8(912) 240-04-32</p>
      <p class="cont_adres"><em>Адрес:</em> ул. 8 Марта, д. 20Б</p>
    </div>
  </div>
  <div id="hide34" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Перми:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Кац Борис Самуилович </p>
      <p class="cont_text"><em>Телефон:</em> 8(902) 474-54-42</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Антонов Павел</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Куйбышева, д. 66/1</p>
    </div>
  </div>
  <div id="hide35" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Сыктывкаре:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Аксянова Мария Борисовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(912) 151-82-09</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Кутузова, д. 5</p>
    </div>
  </div>
  <div id="hide36" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Уфе:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Докучаев Сергей Владимирович</p>
      <p class="cont_text"><em>Телефон:</em> 8(917) 377-00-33</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Адигамов Айрат Разилевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(987) 240-42-51</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Рихарда Зорге, д. 5</p>
    </div>
  </div>
  <div id="hide37" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Челябинске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Васина Ольга Александровна</p>
      <p class="cont_text"><em>Телефон:</em> 8(909) 072-50-20 </p>
      <p class="cont_adres"><em>Адрес:</em> Ленина пр., д. 38</p>
    </div>
  </div>
  <div id="hide38" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Красноярске:</p>
      <p class="cont_name"><em>Старший брокер:</em> </p>
      <p class="cont_text"><em>ФИО:</em> Никитина Татьяна Викторовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(902) 913-77-77</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Карла Маркса, д. 24А</p>
    </div>
  </div>
  <div id="hide39" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Новосибирске:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Башкатов Евгений Юрьевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(913) 919-71-03</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Серебренниковская, д. 20</p>
    </div>
  </div>
  <div id="hide40" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Тюмени:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Дубовов Максим Павлович</p>
      <p class="cont_text"><em>Телефон:</em> 8(922) 004-73-35</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Профсоюзная, д. 52</p>
    </div>
  </div>
  <div id="hide41" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Барнауле:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Щукина Анна Николаевна</p>
      <p class="cont_text" style="margin-top: 34px;"><em>Телефон:</em> 8(913) 242-53-97</p>
      <p class="cont_adres"><em>Адрес:</em> Комсомольский пр., д. 106А</p>
    </div>
  </div>
  <div id="hide42" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Ханты-Мансийске:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Баженова Светлана Николаевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(912) 902-03-25</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Дзержинского, д. 16</p>
    </div>
  </div>
  <div id="hide43" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Омске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Борисова Наталья Викторовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(903) 927-51-28</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Дзержинского, д. 16</p>
    </div>
  </div>
  <div id="hide44" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Петропавловск-Камчатске:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Смирнова Ирина Игоревна</p>
      <p class="cont_text"><em>Телефон:</em> 8(914) 621-75-57</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Набережная, д. 30</p>
    </div>
  </div>
  <div id="hide45" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Хабаровске:</p>
      <p class="cont_name"><em>Старший брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Головко Андрей Сергеевич</p>
      <p class="cont_text"><em>Телефон:</em> 8(914) 193-98-29</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Гамарника, д. 12</p>
    </div>
  </div>
  <div id="hide46" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Благовещенске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Никулина Анастасия Викторовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(963) 802-76-12</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Зейская, д. 240</p>
    </div>
  </div>
  <div id="hide47" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Иркутске:</p>
      <p class="cont_name"><em>Начальник управление:</em></p>
      <p class="cont_text"><em>ФИО:</em> Рожкова Евгения Сергеевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(902) 513-20-55</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Нижняя Набережная, д. 10</p>
      <div>
        <a class="link" data-position="[52.2715265, 104.3239138]" href=# style="text-decoration: none;">
          <p class="cont_zagol" style="margin-top: 34px;">Допольнительный офис:</p>
          <p class="cont_name"><em>Старший брокер:</em></p>
          <p class="cont_text"><em>ФИО:</em> Лаликина Елена Александровна</p>
          <p class="cont_text"><em>Телефон:</em> 8(914) 884-51-02</p>
          <p class="cont_adres"><em>Адрес:</em> ул. Пискунова, д. 122/1 оф. №611</p>
        </a>
      </div>
    </div>
  </div>
  <div id="hide48" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Владивостоке:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Москаленко Антон Игоревич</p>
      <p class="cont_text"><em>Телефон:</em> 8(902) 483-29-66</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Фонтанная, д. 18</p>
    </div>
  </div>
  <div id="hide49" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Саранске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Ермилов Максим Александрович</p>
      <p class="cont_text"><em>Телефон:</em> 8(917) 990-13-85</p>
      <p class="cont_adres"><em>Адрес:</em> 70 лет Октября пр., д. 86</p>
    </div>
  </div>
  <div id="hide50" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Твери:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Буканов Дмитрий Владимирович</p>
      <p class="cont_text"><em>Телефон:</em> 8(915) 701-26-68</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Трехсвятская, д. 8</p>
    </div>
  </div>
  <div id="hide51" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Рязани:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Колосова Светлана Вячеславовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(900) 602-51-01</p>
      <p class="cont_adres"><em>Адрес:</em> Первомайский пр., д. 18</p>
    </div>
  </div>
  <div id="hide52" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Улан-Удэ:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Балганов Батор Борисович</p>
      <p class="cont_text"><em>Телефон:</em> 8(983) 439-62-10</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Борсоева, д. 97</p>
    </div>
  </div>
  <div id="hide53" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Якутске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Багдасарян Виктория Викторовна</p>
      <p class="cont_text"><em>Телефон:</em> 8(964) 429-20-00</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Октябрьская, д. 17</p>
    </div>
  </div>
  <div id="hide54" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Кемерово:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Овчаренко Елизавета Юрьевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(923) 606-48-62</p>
      <p class="cont_adres"><em>Адрес:</em> Октябрьский пр., д. 53, каб. №609</p>
    </div>
  </div>
  <div id="hide55" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты во Владимире:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Урлина Татьяна</p>
      <p class="cont_text"><em>Телефон:</em> 8(905) 140-46-92</p>
      <p class="cont_adres"><em>Адрес:</em> Ленина пр., д. 36, каб. №241</p>
    </div>
  </div>
  <div id="hide56" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Тамбове:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Семенкова Ольга Васильевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(915) 877-50-20</p>
      <p class="cont_adres"><em>Адрес:</em> ул. Карла Маркса, д. 130</p>
    </div>
  </div>
  <div id="hide57" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Ангарске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Смашная Сабина</p>
      <p class="cont_text"><em>Телефон:</em> 8(914) 918-47-99</p>
      <p class="cont_adres"><em>Адрес:</em> 7 м/р-н, д. 25</p>
    </div>
  </div>
  <div id="hide58" style="display:none;
                         position: absolute;
                         top: 25px;
                         left: 25px;
                         background-color:
                         rgba(134, 117, 80, .7);
                         border-radius: 25px">
    <div style="margin: 10px 10px 10px 10px;">
      <p class="cont_zagol">Контакты в Брянске:</p>
      <p class="cont_name"><em>Брокер:</em></p>
      <p class="cont_text"><em>ФИО:</em> Закревская Анна Евгеньевна</p>
      <p class="cont_text"><em>Телефон:</em> 8(919) 193-78-40</p>
      <p class="cont_adres"><em>Адрес:</em> Ленина пр., д. 10Б</p>
    </div>
  </div>
</div>

<table style="width: 100%; vertical-align: top;">
  <tr>
    <td valign="top">
      <ul class="pushup" style="list-style: none;">
        <li>
          <div class="view-source">
            <ul class="pushup" style="list-style: none;">
              <a>Центральное управление</a>
              <div class="spisok">
                <li>
                  <a class="link current" data-position="[55.785074, 37.718887]" href=#>
                    <span onclick="toggle(document.getElementById('hide1'))">
                  Москва
                </span>
                  </a>
                </li>
                <li>
                  <a class="link" data-position="[54.7804438, 32.049122]" href=#><span onclick="toggle(document.getElementById('hide2'))">Смоленск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[54.1958819, 37.6169383]" href=#><span onclick="toggle(document.getElementById('hide3'))">Тула</span></a>
                </li>
                <li>
                  <a class="link" data-position="[54.515107, 36.2555539]" href=#><span onclick="toggle(document.getElementById('hide4'))">Калуга</span></a>
                </li>
                <li>
                  <a class="link" data-position="[56.8529958, 35.9095655]" href=#><span onclick="toggle(document.getElementById('hide50'))">Тверь</span></a>
                </li>
                <li>
                  <a class="link" data-position="[54.62954068, 39.73012773]" href=#><span onclick="toggle(document.getElementById('hide51'))">Рязань</span></a>
                </li>
                <li>
                  <a class="link" data-position="[53.237081, 34.359173]" href=#><span onclick="toggle(document.getElementById('hide58'))">Брянск</span></a>
                </li>
              </div>
            </ul>
          </div>
        </li>
        <li>
          <div class="view-source">
            <ul class="pushup" style="list-style: none;">
              <a>Северо-Западное управление</a>
              <div class="spisok">
                <li>
                  <a class="link" data-position="[59.9450523, 30.3504522]" href=#><span onclick="toggle(document.getElementById('hide5'))">Санкт-Петербург</span></a>
                </li>
                <li>
                  <a class="link" data-position="[57.811749, 28.351214]" href=#><span onclick="toggle(document.getElementById('hide6'))">Псков</span></a>
                </li>
                <li>
                  <a class="link" data-position="[54.709792, 20.499471]" href=#><span onclick="toggle(document.getElementById('hide7'))">Калининград</span></a>
                </li>
                <li>
                  <a class="link" data-position="[64.5391728, 40.5249587]" href=#><span onclick="toggle(document.getElementById('hide8'))">Архангельск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[57.6370169, 39.8688054]" href=#><span onclick="toggle(document.getElementById('hide9'))">Ярославль</span></a>
                </li>
                <li>
                  <a class="link" data-position="[59.21582, 39.89406]" href=#><span onclick="toggle(document.getElementById('hide10'))">Вологда</span></a>
                </li>
              </div>
            </ul>
          </div>
        </li>
        <li>
          <div class="view-source">
            <ul class="pushup" style="list-style: none;">
              <a>Поволжское управление</a>
              <div class="spisok">
                <li>
                  <a class="link" data-position="[54.3188793, 48.3991991]" href=#><span onclick="toggle(document.getElementById('hide12'))">Ульяновск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[51.5331659, 46.015861]" href=#><span onclick="toggle(document.getElementById('hide13'))">Саратов</span></a>
                </li>
                <li>
                  <a class="link" data-position="[53.235404, 50.192411]" href=#><span onclick="toggle(document.getElementById('hide14'))">Самара</span></a>
                </li>
                <li>
                  <a class="link" data-position="[53.200656, 45.010506]" href=#><span onclick="toggle(document.getElementById('hide15'))">Пенза</span></a>
                </li>
                <li>
                  <a class="link" data-position="[56.3218559, 44.009428]" href=#><span onclick="toggle(document.getElementById('hide16'))">Нижний Новгород</span></a>
                </li>
                <li>
                  <a class="link" data-position="[53.508368, 49.278053]" href=#><span onclick="toggle(document.getElementById('hide17'))">Тольятти</span></a>
                </li>
                <li>
                  <a class="link" data-position="[51.76826, 55.101472]" href=#><span onclick="toggle(document.getElementById('hide18'))">Оренбург</span></a>
                </li>
                <li>
                  <a class="link" data-position="[56.623157, 47.890546]" href=#><span onclick="toggle(document.getElementById('hide19'))">Йошкар-Ола</span></a>
                </li>
                <li>
                  <a class="link" data-position="[58.604091, 49.66106]" href=#><span onclick="toggle(document.getElementById('hide20'))">Киров</span></a>
                </li>
                <li>
                  <a class="link" data-position="[55.789571, 49.138703]" href=#><span onclick="toggle(document.getElementById('hide21'))">Казань</span></a>
                </li>
                <li>
                  <a class="link" data-position="[56.145516, 47.235465]" href=#><span onclick="toggle(document.getElementById('hide22'))">Чебоксары</span></a>
                </li>
                <li>
                  <a class="link" data-position="[48.717483, 44.526897]" href=#><span onclick="toggle(document.getElementById('hide23'))">Волгоград</span></a>
                </li>
                <li>
                  <a class="link" data-position="[54.193091, 45.227441]" href=#><span onclick="toggle(document.getElementById('hide49'))">Саранск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[56.119821, 40.361838]" href=#><span onclick="toggle(document.getElementById('hide55'))">Владимир</span></a>
                </li>
              </div>
            </ul>
          </div>
        </li>
        <li>
          <div class="view-source">
            <ul class="pushup" style="list-style: none;">
              <a>Южное управление</a>
              <div class="spisok">
                <li>
                  <a class="link" data-position="[51.658248, 39.202366]" href=#><span onclick="toggle(document.getElementById('hide24'))">Воронеж</span></a>
                </li>
                <li>
                  <a class="link" data-position="[47.2347735, 39.7065450]" href=#><span onclick="toggle(document.getElementById('hide25'))">Ростов на Дону</span></a>
                </li>
                <li>
                  <a class="link" data-position="[52.967565, 36.063106]" href=#><span onclick="toggle(document.getElementById('hide26'))">Орел</span></a>
                </li>
                <li>
                  <a class="link" data-position="[52.6027474, 39.603754]" href=#><span onclick="toggle(document.getElementById('hide27'))">Липецк</span></a>
                </li>
                <li>
                  <a class="link" data-position="[45.0227976, 38.9723481]" href=#><span onclick="toggle(document.getElementById('hide28'))">Краснодар</span></a>
                </li>
                <li>
                  <a class="link" data-position="[45.0375812, 41.9419722]" href=#><span onclick="toggle(document.getElementById('hide29'))">Ставрополь</span></a>
                </li>
                <li>
                  <a class="link" data-position="[50.5954437, 36.5914875]" href=#><span onclick="toggle(document.getElementById('hide30'))">Белгород</span></a>
                </li>
                <li>
                  <a class="link" data-position="[44.724342, 37.768123]" href=#><span onclick="toggle(document.getElementById('hide31'))">Новороссийск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[43.580506, 39.721062]" href=#><span onclick="toggle(document.getElementById('hide32'))">Сочи</span></a>
                </li>
                <li>
                  <a class="link" data-position="[52.719463, 41.4513559]" href=#><span onclick="toggle(document.getElementById('hide56'))">Тамбов</span></a>
                </li>
              </div>
            </ul>
          </div>
        </li>
      </ul>
    </td>
    <td valign="top">
      <ul class="pushup" style="list-style: none;">
        <li>
          <div class="view-source">
            <ul class="pushup" style="list-style: none;">
              <a>Уральское управление</a>
              <div class="spisok">
                <li>
                  <a class="link" data-position="[56.816098, 60.584402]" href=#><span onclick="toggle(document.getElementById('hide33'))">Екатеринбург</span></a>
                </li>
                <li>
                  <a class="link" data-position="[57.998674, 56.243509]" href=#><span onclick="toggle(document.getElementById('hide34'))">Пермь</span></a>
                </li>
                <li>
                  <a class="link" data-position="[61.678794, 50.838039]" href=#><span onclick="toggle(document.getElementById('hide35'))">Сыктывкар</span></a>
                </li>
                <li>
                  <a class="link" data-position="[54.748533, 55.982845]" href=#><span onclick="toggle(document.getElementById('hide36'))">Уфа</span></a>
                </li>
                <li>
                  <a class="link" data-position="[55.1552074, 61.3014357]" href=#><span onclick="toggle(document.getElementById('hide37'))">Челябинск</span></a>
                </li>
              </div>
            </ul>
          </div>
        </li>
        <li>
          <div class="view-source">
            <ul class="pushup" style="list-style: none;">
              <a>Сибирское управление</a>
              <div class="spisok">
                <li>
                  <a class="link" data-position="[56.020565, 92.796455]" href=#><span onclick="toggle(document.getElementById('hide38'))">Красноярск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[55.024633, 82.926546]" href=#><span onclick="toggle(document.getElementById('hide39'))">Новосибирск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[57.152617, 65.555838]" href=#><span onclick="toggle(document.getElementById('hide40'))">Тюмень</span></a>
                </li>
                <li>
                  <a class="link" data-position="[53.349202, 83.784733]" href=#><span onclick="toggle(document.getElementById('hide41'))">Барнаул</span></a>
                </li>
                <li>
                  <a class="link" data-position="[61.0062336, 69.0341316]" href=#><span onclick="toggle(document.getElementById('hide42'))">Ханты-Мансийск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[54.985628, 73.386055]" href=#><span onclick="toggle(document.getElementById('hide43'))">Омск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[55.3476326, 86.1276003]" href=#><span onclick="toggle(document.getElementById('hide54'))">Кемерово</span></a>
                </li>
              </div>
            </ul>
          </div>
        </li>
        <li>
          <div class="view-source">
            <ul class="pushup" style="list-style: none;">
              <a>Дальневосточное управление</a>
              <div class="spisok">
                <li>
                  <a class="link" data-position="[53.0267896, 158.6466739]" href=#><span onclick="toggle(document.getElementById('hide44'))">Петропавловск-Камчатский</span></a>
                </li>
                <li>
                  <a class="link" data-position="[48.4701017, 135.0770964]" href=#><span onclick="toggle(document.getElementById('hide45'))">Хабаровск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[50.2565927, 127.5705113]" href=#><span onclick="toggle(document.getElementById('hide46'))">Благовещенск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[52.2928783, 104.2870367]" href=#><span onclick="toggle(document.getElementById('hide47'))">Иркутск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[43.120806, 131.8818402]" href=#><span onclick="toggle(document.getElementById('hide48'))">Владивосток</span></a>
                </li>
                <li>
                  <a class="link" data-position="[51.849926, 107.563568]" href=#><span onclick="toggle(document.getElementById('hide52'))">Улан-Удэ</span></a>
                </li>
                <li>
                  <a class="link" data-position="[62.027137, 129.718344]" href=#><span onclick="toggle(document.getElementById('hide53'))">Якутск</span></a>
                </li>
                <li>
                  <a class="link" data-position="[52.5196806, 103.8670315]" href=#><span onclick="toggle(document.getElementById('hide57'))">Ангарск</span></a>
                </li>
              </div>
            </ul>
          </div>
        </li>
      </ul>
    </td>
  </tr>
</table>
              
            
!

CSS

              
                /*Стили для списка*/

.pushup {
  list-style: none;
  font-family: "Arial";
  font-size: 16px;
}

.pushup li {
  font-size: 16px;
  position: relative;
  padding: 20px 0 20px 40px;
  color: #000;
  font-weight: bold;
  font-family: "Arial";
}

.pushup li:before {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #867550;
  content: "";
  left: 0;
  transition: .3s ease-in-out;
  top: 27px;
}

.pushup li:after {
  position: absolute;
  border-left: 1px dotted #867550;
  width: 1px;
  bottom: -12px;
  content: "";
  left: 3px;
  top: 48px;
}

.pushup li:hover:before {
  box-shadow: 0 0 0 10px rgba(134, 117, 80, .7)
}

.pushup li:last-child:after {
  content: none;
}


/*Стили для маркера*/

.marker {
  position: absolute;
  cursor: pointer;
}

.pin-wrap {
  position: absolute;
  width: 100px;
  height: 100px;
  margin-top: -120.71068px;
  margin-left: -50px;
  -webkit-transform-origin: 50% 120.71068% 0;
  transform-origin: 50% 120.71068% 0;
}

.pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  -webkit-transform-origin: 50% 120.71068% 0;
  transform-origin: 50% 120.71068% 0;
}

.pin::after {
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  content: '';
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  border: 20px solid #867550;
  border-radius: 50% 50% 50% 50%;
}

.pin::before {
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  content: '';
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  border: 18px solid #867550;
  border-radius: 50% 50% 50% 0;
}

.shadow {
  position: absolute;
}

.shadow::after {
  position: absolute;
  left: -125px;
  display: block;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  content: '';
  -webkit-transform: rotateX(55deg);
  transform: rotateX(55deg);
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.5) 100px 0 20px;
}

.pulse {
  position: absolute;
  margin-top: -50px;
  margin-left: -50px;
  -webkit-transform: rotateX(55deg);
  transform: rotateX(55deg);
}

.pulse::after {
  display: block;
  width: 100px;
  height: 100px;
  content: '';
  -webkit-animation: pulsate 1s ease-out;
  animation: pulsate 1s ease-out;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0;
  border-radius: 50%;
  box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6px 3px #867550;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}

.header {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 2em;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  color: #f93c11;
  background: rgba(255, 255, 255, 0.75);
}

.tags {
  font-weight: 300;
}

.list-label {
  font-family: Raleway, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  font-weight: 400;
}

.header li {
  display: inline-block;
}

.tags a {
  color: #f93c11;
}

.animations a {
  line-height: 42px;
  display: block;
  box-sizing: border-box;
  height: 44px;
  margin: 0 5px;
  padding: 0 10px;
  text-decoration: none;
  color: #f93c11;
  border: 2px solid #f93c11;
  border-radius: 22px;
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}

.animations a:hover {
  color: white;
  background: #f93c11;
}

.marker {
  display: none;
}

.marker-drop {
  display: block;
  animation: drop .3s ease;
}

@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes drop {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Стили для контактов*/

.cont_zagol {
  font-family: Arial;
  font-size: 16px;
  color: #000;
  font-weight: 600;
  }
.cont_name {
  font-family: Arial;
  font-size: 15px;
  color: #000;
  margin-top: 34px;
  margin-bottom: 24px;
}
.cont_text {
  font-family: Arial;
  font-size: 14px;
  color: #000;
  margin-top: 24px;
  margin-bottom: 24px;
}
.cont_adres {
  font-family: Arial;
  font-size: 14px;
  color: #000;
  margin-top: 34px;
}

.googlemaps {
  position: relative;
  line-height: normal;
}
              
            
!

JS

              
                // Code goes here

var marker;
var map;

CustomMarker.prototype = new google.maps.OverlayView();

function CustomMarker(opts) {
  this.setValues(opts);
}

CustomMarker.prototype.draw = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    div = this.div = $('' +
      '<div class="marker">' +
      '<div class="shadow"></div>' +
      '<div class="pulse"></div>' +
      '<div class="pin-wrap">' +
      '<div class="pin"></div>' +
      '</div>' +
      '</div>' +
      '')[0];
    this.pinWrap = this.div.getElementsByClassName('pin-wrap');
    this.pin = this.div.getElementsByClassName('pin');
    this.pinShadow = this.div.getElementsByClassName('shadow');
    div.style.position = 'absolute';
    div.style.cursor = 'pointer';
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(self, "click", event);
    });
  }

  div.classList.remove('marker-drop');
  setTimeout(function() {
    div.classList.add('marker-drop');
  }, 100)

  var point = this.getProjection().fromLatLngToDivPixel(this.position);
  if (point) {
    div.style.left = point.x + 'px';
    div.style.top = point.y + 'px';
  }
};

CustomMarker.prototype.animateDrop = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'scaleY(2) translateY(-' + $('#map').outerHeight() + 'px)',
    'opacity': '1',
  });
  dynamics.animate(this.pinWrap, {
    translateY: 0,
    scaleY: 1.0,
  }, {
    type: dynamics.gravity,
    duration: 1800,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 1800,
    bounciness: 600,
  })

  dynamics.stop(this.pinShadow);
  dynamics.css(this.pinShadow, {
    'transform': 'scale(0,0)',
  });
  dynamics.animate(this.pinShadow, {
    scale: 1,
  }, {
    type: dynamics.gravity,
    duration: 1800,
  });
}

CustomMarker.prototype.animateBounce = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'none',
  });
  dynamics.animate(this.pinWrap, {
    translateY: -30
  }, {
    type: dynamics.forceWithGravity,
    bounciness: 0,
    duration: 500,
    delay: 150,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 0,
  });
  dynamics.animate(this.pin, {
    scaleY: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 600,
    delay: 650,
  });

  dynamics.stop(this.pinShadow);
  dynamics.css(this.pinShadow, {
    'transform': 'none',
  });
  dynamics.animate(this.pinShadow, {
    scale: 0.6,
  }, {
    type: dynamics.forceWithGravity,
    bounciness: 0,
    duration: 500,
    delay: 150,
  });
}

CustomMarker.prototype.animateWobble = function() {
  dynamics.stop(this.pinWrap);
  dynamics.css(this.pinWrap, {
    'transform': 'none',
  });
  dynamics.animate(this.pinWrap, {
    rotateZ: -45,
  }, {
    type: dynamics.bounce,
    duration: 1800,
  });

  dynamics.stop(this.pin);
  dynamics.css(this.pin, {
    'transform': 'none',
  });
  dynamics.animate(this.pin, {
    scaleX: 0.8
  }, {
    type: dynamics.bounce,
    duration: 800,
    bounciness: 1800,
  });
}

$(document).on('click', '.link', function() {
  var $this = $(this);
  $this.addClass('current').siblings().removeClass('current');

  var pos = $this.data('position');
  changeMarkerPos(pos);
});

function initialize() {
  var styles = [{
    stylers: [{
      saturation: 0
    }]
  }];

  var styledMap = new google.maps.StyledMapType(styles, {
    name: "Styled Map"
  });

  var mapProp = {
    center: new google.maps.LatLng(55.720932, 37.600693),
    zoom: 17,
    panControl: false,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: true,
    streetViewControl: false,
    overviewMapControl: false,
    rotateControl: true,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);

  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style')

  marker = new CustomMarker({
    position: new google.maps.LatLng(55.720932, 37.600693)
  });

  google.maps.event.addListener(marker, 'click', function(e) {
    marker.animateWobble();
  });
  $('#drop').on('click', function(e) {
    marker.animateDrop();
  });

  $('#wobble').on('click', function(e) {
    marker.animateWobble();
  });

  $('#bounce').on('click', function(e) {
    marker.animateBounce();
  })
  marker.setMap(map);
  map.panTo(marker.position);
}

function changeMarkerPos(pos) {
  var myLatLng = new google.maps.LatLng(pos[0], pos[1]);
  marker.position = myLatLng;

  map.panTo(myLatLng);
}

$(function() {
  $("#toggler").on("click", function() {
    $(".popup-credit").show();
  })

})

google.maps.event.addDomListener(window, 'load', initialize);

//Отображение контактов

var it_last;
function toggle(it) { 
    if ((it_last)&&(it!=it_last)) {// скрытие предыдущего
        it_last.style.display = "none"; 
    }

    it.style.display= (it.style.display=="none") ? "block" : "none";  

    it_last = it; 
} 

//Выпадающий список

$(document).ready(function(){                                                  
    $('.view-source .spisok').hide();
    $('.view-source a').on('click', function() {
      $('.view-source .spisok').slideUp(500);
      $(this).parent().find('.spisok').slideDown(500);
    });
});

              
            
!
999px

Console