Для реализации увеличения карты при нажатии на внешнюю кнопку, а также функционала увеличения масштаба и перемещения к нужному маркеру при клике на элемент с атрибутом data-office-name, можно воспользоваться следующим кодом на JavaScript:
```javascript
// Загрузка карты
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 59.93863, lng: 30.31413} // Координаты центра карты
});
// Добавление маркеров на карту
var marker1 = new google.maps.Marker({
position: {lat: 59.93863, lng: 30.31413}, // Координаты маркера
map: map,
title: 'Офис 1'
});
var marker2 = new google.maps.Marker({
position: {lat: 59.94205, lng: 30.32864}, // Координаты маркера
map: map,
title: 'Офис 2'
});
// Увеличение масштаба карты при нажатии на внешнюю кнопку
document.getElementById('zoom-in').addEventListener('click', function() {
var currentZoom = map.getZoom();
map.setZoom(currentZoom + 1);
});
// Перемещение к нужному маркеру при клике на элемент с атрибутом data-office-name
var officeButtons = document.querySelectorAll('[data-office-name]');
officeButtons.forEach(function(button) {
button.addEventListener('click', function() {
var officeName = this.getAttribute('data-office-name');
if (officeName === 'Офис 1') {
map.setCenter({lat: 59.93863, lng: 30.31413}); // Координаты офиса 1
map.setZoom(15);
} else if (officeName === 'Офис 2') {
map.setCenter({lat: 59.94205, lng: 30.32864}); // Координаты офиса 2
map.setZoom(15);
}
});
});
}
```
В данном примере при клике на кнопку с id "zoom-in" будет увеличиваться масштаб карты, а при клике на элемент с атрибутом data-office-name и значением "Офис 1" или "Офис 2" карта будет перемещаться к соответствующему маркеру и увеличивать масштаб до значения 15.
Не забудьте добавить HTML разметку для кнопок с id "zoom-in" и элементов с атрибутом data-office-name для возможности их обработки в скрипте.