0xD34F

Маркеры сложить в массив, по клику на кнопки доставать из массива маркер с тем же индексом, что и у кнопки, триггерить на нём событие клика. Как-то так.

fitBounds:

// это массив ваших "точек"
const locations = [
  { lat: ..., lng: ... },
  { lat: ..., lng: ... },
  ...
];

const onLoad = map => {
  const bounds = new window.google.maps.LatLngBounds();
  locations.forEach(n => bounds.extend(n));
  map.fitBounds(bounds);
};

<GoogleMap
  onLoad={onLoad}
  ...
>
  {locations.map(n => <Marker position={n} />)}
</GoogleMap>

<gmap-map
  ref="map"
  ...

const bounds = new google.maps.LatLngBounds();
массивКоординатВашихЛокаций.forEach(n => bounds.extend(n));
this.$refs.map.fitBounds(bounds);

https://codesandbox.io/s/for-https-qna-habr-com-q-...

:style="mapStyles"

data() {
  return {
    mapStyles: {
      styles: [

Во-первых - не очень понятно, откуда вы взяли, что стили должны быть объектом, содержащим свойство styles. В документации есть ссылка на конструктор стилей - он выдаёт просто массив, без обёртки в виде объекта.

Во-вторых - компонент карты не имеет параметра style. То есть, документация врёт. Да, так бывает. Зато есть параметр options, частью которого стили и являются. Так что вам следует заменить

mapStyles: { на options: {

:style="mapStyles" на :options="options"

Ну и ещё стоит убедиться, что api key есть - без него стили применяться не хотят.

Складываем данные маркеров в массив объектов - каждый содержит координаты и контент всплывающего окна:

const markersData = [
  { position: { lat: ..., lng: ... }, content: '...' },
  { position: { lat: ..., lng: ... }, content: '...' },
  ...
];

Всплывающее окно - одно на всех:

const infoWindow = new google.maps.InfoWindow();

Создаём массив маркеров:

const markers = markersData.map(({ position, content }) => {
  const marker = new google.maps.Marker({ position, map });

  marker.addListener('click', () => {
    infoWindow.setContent(content);
    infoWindow.open(map, marker);
  });

  return marker;
});

Смена иконки - сделаем метод, который будет устанавливать активную у указанного маркера, а у остальных дефолтную (если надо сбросить текущую активную, передаёте null):

const setActiveIcon = marker => markers.forEach(n => n.setIcon(n === marker ? iconActive : icon));

Всё.

<GoogleMapReact draggable={false}>

Обходите массив с точками, считаете количество положительных результатов вызовов containsLocation:

function showDotsCountInPolygon(e) {
  const dotsCountInPolygon = dots
    .filter(n => google.maps.geometry.poly.containsLocation(new google.maps.LatLng(n), this))
    .length;

  infoWindow.setContent(`Точек в полигоне: ${dotsCountInPolygon}`);
  infoWindow.setPosition(e.latLng);
  infoWindow.open(map);
}

polygon.addListener('click', showDotsCountInPolygon);

https://jsfiddle.net/awcu8de9/

Складываете в массив объектов координаты маркеров и контент для всплывающего окна:

const markerData = [
  { coord: [ ... ], content: '...' },
  { coord: [ ... ], content: '...' },
  ...
];

Создаёте на основе этого массива маркеры, добавляете маркерам обработчик клика, в котором окно получает контент и открывается:

markerData.forEach(function(n) {
  const marker = new google.maps.Marker({
    position: new google.maps.LatLng(...n.coord),
    map,
  });

  marker.addListener('click', function() {
    infowindow.setContent(n.content);
    infowindow.open(map, marker);
  });
});

Всё.

Объявление функции codeAddress - уберите цикл; в саму функцию передавайте адрес в качестве параметра:

function codeAddress(address, geocoder, map) {
  geocoder.geocode({ address }, function(results, status) {
    if (status === 'OK') {
      new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

В initMap перебирайте массив адресов, для каждого вызывайте codeAddress:

address.forEach(n => codeAddress(n, geocoder, map));

mapTypeControl: false,
streetViewControl: false,
zoomControl: false,

Не открывается, потому что вместо изменения значения свойства компонента, отвечающего за состояние infoWindow, у вас в методе onMarkerClick какая-то ересь.

Делайте так:

<gmap-info-window 
  :options="infoOptions" 
  :position="infoWindowPos" 
  :opened="infoWinOpen"
  @closeclick="infoWinOpen = false"
>
  {{ infoContent }}
</gmap-info-window>

onMarkerClick(e) {
  this.infoWindowPos = e.latLng; // задаём положение окна, над кликнутым маркером
  this.infoContent = JSON.stringify(e.latLng); // задаём контент окна, передаётся в слот
  this.infoWinOpen = true; // открываем окно
},

<gmap-map
  ref="map"
  v-bind="options"
  @click="onMapClick"
>
  <gmap-marker
    v-for="m in markers"
    :key="m.id"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="onMarkerClick"
  />
</gmap-map>

data: () => ({
  options: {
    center: { lat: 45.101637, lng: 38.986345 },
    zoom: 15,
  },
  markers: [],
}),
methods: {
  onMapClick(e) {
    this.markers.push({
      id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
      position: e.latLng,
    });
  },
  onMarkerClick(e) {
    this.$refs.map.panTo(e.latLng);
    // или
    // this.options.center = e.latLng;
  },
},

https://codesandbox.io/s/blissful-fast-pjc7o

Не дублируя код инициализации

Очевидно же - сделать функцию, которая будет принимать id/элемент (контейнер для карты) и данные маркеров.

<div id="address-list"></div>

const addressList = document.querySelector('#address-list');

addressList.innerHTML = markersData.map((n, i) => `
  <div class="address-list-item">
    <span data-index="${i}">${n.name}</span>
  </div>
`).join('');

addressList.addEventListener('click', e => {
  const marker = markersData[e.target.dataset.index];
  if (marker) {
    map.setCenter(new google.maps.LatLng(marker.lat, marker.lng));
  }
});

https://codepen.io/anon/pen/PryVPj?editors=1010

UPD. https://jsfiddle.net/y2aL36rp/

function onMarkerClick(e) {
  map.setZoom(8);
  map.panTo(e.latLng);
}


for (const f of features) {
  const marker = new google.maps.Marker({
    position: f.position,
    icon: icons[f.type].icon,
    map,
  });
  marker.addListener('click', onMarkerClick);
}

А вот есть у вас некий styleSelector - это что? Непонятно. Не вижу, чтобы эта штука где-то объявлялась - а вы ей пытаетесь addEventListener сделать. Вот код и падает с ошибкой, до того, как подключается обработчик клика, инициирующий построение маршрута.

Создаёте infowindow:

const info = new google.maps.InfoWindow();

И показываете его при клике на маркеры:

marker.addListener('click', function() {
  info.setContent('сюда засовываете свою информацию');
  info.open(map, marker);
});

https://codepen.io/anon/pen/MdjRrM?editors=1010

$('#btn').click(function() {
  i = (i + 1) % arrLatLng.length;
  map.setCenter(arrLatLng[i]);
});

У вас маркеры дублируются - вы их добавляете по событию places_changed и повторно при построении polyline. Так что один вы удалили, а другой в том же месте (другие - дублируются многократно) остался.

Что конкретно следует предпринять:

1. Сделайте infowindow свойством компонента. Инициализируйте его там же где и саму карту.
   
2. Перенесите назначение обработчика клика маркера из updateMap в обработчик places_changed, туда, где маркер создаётся впервые. Должно получится как-то так:
   
   

   const marker = new google.maps.Marker({
     map: this.map,
     title: place.name,
     position: place.geometry.location,
   });
   google.maps.event.addListener(marker, 'click', () => {
     this.infowindow.setContent(marker.title);
     this.infowindow.open(this.map, marker);
   });
   this.markers.push(marker);

   
   
3. Сам метод updateMap должен сильно сократиться в размерах (да и имя ему сменить не помешает - на updatePolyline, например):
   
   

   updateMap() {
     if (this.polyline) {
       this.polyline.setMap(null);
     }
   
     this.polyline = new google.maps.Polyline({
       path: this.markers.map(n => n.getPosition()),
       geodesic: true,
       strokeColor: '#FF0000',
       strokeOpacity: 1.0,
       strokeWeight: 2,
       map: this.map,
     });
   },

   
   
4. Что касается работы с элементами DOM-дерева:
   
   

   document.getElementById('map')
   <...>
   document.getElementById('inputPlace')

   
   Так дела не делаются. Стоит переписать с использованием ref.