https://ilcompany.ru/local/js/ymaps.js

1ymaps.ready(init);
2
3function init() {
4  var map = new ymaps.Map('map', {
5    center: [55.890432, 37.856092],
6    zoom: 9,
7    behaviors: ['default', 'scrollZoom'],
8  });
9
10  // Отключаем скролл колесом мыши по умолчанию
11  map.behaviors.disable('scrollZoom');
12
13  // Включаем скролл только при зажатой Ctrl
14  map.behaviors.enable('scrollZoom');
15
16  var offices = [
17    {
18      active: true,
19      coords: [55.948764, 37.428881],
20      name: 'Главный офис',
21      color: 'red',
22      details: {
23        type: 'office',
24        address:
25          'Московская область, г. Химки, мкр. Сходня, ул. Октябрьская, влд. 29А, стр. 1, офис 4',
26        phone: '+7 (499) 956-20-77',
27        email: '[email protected]',
28        whatsapp: 'WhatsApp',
29        telegram: 'Telegram',
30        whatsapp_url: 'https://wa.me/79636680906',
31        telegram_url: 'https://t.me/+79636680906',
32      },
33    },
34    {
35      active: true,
36      coords: [55.879209, 37.446413],
37      name: 'Склад Москва',
38      color: 'blue',
39      details: {
40        type: 'warehouse',
41        class: 'Класс B+',
42        address: 'Лобненская улица, 19с12, Москва',
43        hours: '9:00 – 18:00, пн—сб, выходной — вс',
44        area: '1 500 м²',
45        temperature: '+20°C — +22°C',
46        storage: 'от 30 м³',
47        features: [
48          'Теплый склад',
49          'Внутри МКАД',
50          'Метро Яхромская, Лианозово',
51          'Удобно для курьеров',
52        ],
53      },
54    },
55    {
56      active: true,
57      coords: [55.832881, 38.283401],
58      name: 'Склад Обухово',
59      color: 'blue',
60      details: {
61        type: 'warehouse',
62        class: 'Класс А',
63        address:
64          'территория Атлант-парк, 36, поселок городского типа Обухово, Богородский городской округ, Московская область',
65        hours: '9:00 – 21:00, ежедневно',
66        area: '6 000 м²',
67        temperature: '+20°C — +22°C',
68        storage: 'от 60 м³',
69        features: [
70          'Теплый склад',
71          'Пропускная система',
72          'Удобное расположение',
73        ],
74      },
75    },
76    {
77      active: false,
78      coords: [55.91603, 37.749698],
79      name: 'Склад Мытищи',
80      color: 'blue',
81      details: {
82        type: 'warehouse',
83        class: 'Класс А',
84        address: 'Осташковское шоссе, 17А, Мытищи, Московская область',
85        hours: '9:00 – 18:00, пн—сб, выходной — вс',
86        area: '6 000 м²',
87        temperature: '+20°C — +22°C',
88        storage: 'от 10 м³',
89        features: ['Теплый склад', 'От МКАД 9 км'],
90      },
91    },
92    // ========== НОВЫЙ СКЛАД ДМИТРОВКА ==========
93    {
94      active: true,
95      coords: [55.898682, 37.54056],
96      name: 'Склад Дмитровка',
97      color: 'blue',
98      details: {
99        type: 'warehouse',
100        class: 'Класс B+',
101        address: 'Дмитровское шоссе, 157с12, Москва',
102        hours: '9:00 – 18:00, ежедневно',
103        area: '2 500 м²',
104        temperature: '+20°C — +22°C',
105        storage: 'от 50 м²',
106        features: [
107          'Теплый склад',
108          'Внутри МКАД',
109          'Метро Лианозово рядом',
110          'Удобный подъезд',
111          'Подходит для экспресс-заказов',
112        ],
113      },
114    },
115  ];
116
117  const visibleOffices = offices.filter((office) => office.active !== false);
118
119  visibleOffices.forEach(function (office) {
120    var placemark = new ymaps.Placemark(
121      office.coords,
122      {
123        balloonContentHeader: `<div style="font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px;">${office.name}</div>`,
124        balloonContentBody: formatBalloonContent(office),
125        hintContent: office.name,
126      },
127      {
128        preset: 'islands#' + office.color + 'Icon',
129        iconColor: getColorCode(office.color),
130      },
131    );
132    map.geoObjects.add(placemark);
133  });
134
135  // Гарантируем, что все метки видны на карте
136  map.setBounds(map.geoObjects.getBounds(), {
137    checkZoomRange: true,
138    zoomMargin: 50,
139  });
140}
141
142function getColorCode(color) {
143  var colors = {
144    red: '#e74c3c',
145    blue: '#3498db',
146    green: '#2ecc71',
147    orange: '#f39c12',
148  };
149  return colors[color] || '#000000';
150}
151
152function formatBalloonContent(office) {
153  if (office.details.type === 'office') {
154    return `
155            <div style="font-family: Arial, sans-serif; max-width: 250px; line-height: 1.4;">
156                <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
157                    <h3 style="margin: 0 0 10px 0; color: #2c3e50;">🏢 ${
158                      office.name
159                    }</h3>
160                    <p style="margin: 5px 0; color: #34495e;">
161                        <strong>📍 Адрес:</strong><br>
162                        ${office.details.address}
163                    </p>
164                </div>
165
166                <div style="display: grid; gap: 8px;">
167                    <div>
168                        <strong>📞 Телефон:</strong><br>
169                        <a href="tel:${office.details.phone.replace(
170                          /\s/g,
171                          '',
172                        )}" style="color: #2980b9; text-decoration: none;">
173                            ${office.details.phone}
174                        </a>
175                    </div>
176
177                    <div>
178                        <strong>📧 Email:</strong><br>
179                        <a href="mailto:${
180                          office.details.email
181                        }" style="color: #2980b9; text-decoration: none;">
182                            ${office.details.email}
183                        </a>
184                    </div>
185
186                    <div style="display: flex; gap: 15px; margin-top: 10px;">
187                        <a href="${
188                          office.details.whatsapp_url
189                        }" target="_blank" style="color: #25D366; text-decoration: none; display: flex; align-items: center; gap: 5px;">

190                            <span>WhatsApp</span>
191                        </a>
192                        <a href="${
193                          office.details.telegram_url
194                        }" target="_blank" style="color: #0088cc; text-decoration: none; display: flex; align-items: center; gap: 5px;">
195                            <span>Telegram</span>
196                        </a>
197                    </div>
198                </div>
199            </div>
200        `;
201  } else {
202    return `
203            <div style="font-family: Arial, sans-serif; max-width: 250px; line-height: 1.4;">
204                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
205                    <h3 style="margin: 0 0 5px 0;">📦 ${office.name}</h3>
206                    <div style="font-size: 14px; opacity: 0.9;">${
207                      office.details.class
208                    }</div>
209                </div>
210
211                <div style="margin-bottom: 15px;">
212                    <p style="margin: 8px 0;">
213                        <strong>📍 Адрес:</strong><br>
214                        ${office.details.address}
215                    </p>
216
217                    <p style="margin: 8px 0;">
218                        <strong>🕒 Режим работы:</strong><br>
219                        ${office.details.hours}
220                    </p>
221                </div>
222
223                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;">
224                    <div style="background: #ecf0f1; padding: 8px; border-radius: 6px; text-align: center;">
225                        <div style="font-weight: bold; color: #2c3e50;">${
226                          office.details.area
227                        }</div>
228                        <div style="font-size: 12px; color: #7f8c8d;">Площадь</div>
229                    </div>
230                    <div style="background: #ecf0f1; padding: 8px; border-radius: 6px; text-align: center;">
231                        <div style="font-weight: bold; color: #2c3e50;">${
232                          office.details.temperature
233                        }</div>
234                        <div style="font-size: 12px; color: #7f8c8d;">Температура</div>
235                    </div>
236                </div>
237
238                <div style="background: #fff3cd; padding: 10px; border-radius: 6px; margin-bottom: 10px;">
239                    <strong>💼 Хранение:</strong> ${office.details.storage}
240                </div>
241
242                <div>
243                    <strong>✨ Особенности:</strong>
244                    <ul style="margin: 8px 0; padding-left: 20px;">
245                        ${office.details.features
246                          .map((feature) => `<li>${feature}</li>`)
247                          .join('')}
248                    </ul>
249                </div>
250            </div>
251        `;
252  }
253}