Карты Google, положение маркера правильное, но центр не

Question

Я пытаюсь внедрить карты Google на веб-сайте, но есть одна проблема, которую я не могу решить. Все мои маркеры размещены правильно, но mapOptions.center неверен, он почти хорошо расположен, но определен в центре кажется, находится слева от карты.

Поскольку я устанавливаю mapOptions.center с точно такой же позицией моего основного маркера, я не понимаю, почему он не работает должным образом.

Как вы можете видеть на скриншоте ниже, это позиция карты по умолчанию при загрузке страницы, но она должна быть центрирована по пурпурному маркеру.

Вот мой код:

  var map;
      lat = [51.032308, 51.033263, 51.033089],
      lng = [4.474540, 4.47114, 4.473013],
      officeLat = lat[0],
      officeLng = lng[0],
      parking1Lat = lat[1],
      parking1Lng = lng[1],
      parking2Lat = lat[2],
      parking2Lng = lng[2];

  google.maps.event.addDomListener(window, 'load', init);
  function init() {
      var customPin = './src/img/custom-map-pin.png'
      var parkingPin = './src/img/custom-map-parking-pin.png'
      var drag;
      var zoomIn;
      var offsettop;
      var offsetleft;
      if(window.innerWidth > 667){
        drag = false
        zoomIn = 17
        offsettop = '100px'
        offsetleft = '220px'
      }else{
        drag = true
        zoomIn = 16
        offsettop = '70px'
        offsetleft = '140px'
  }
  var mapOptions = {
      center: new google.maps.LatLng(officeLat, officeLng),
      zoom: zoomIn,
      disableDefaultUI: true,
      draggable: true,


      styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#B0B0B0"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
  };
  var contentString = '<ul class="mapInfo" id="mapInfo">'+
    '<li class="mapInfo--item element">Begijnenkerkhof 6A</li>'+
    '<li class="mapInfo--item element">2800 Mechelen</li>'+
    '<li class="mapInfo--item element">Belgium</li>'+
    '<li class="mapInfo--item element">+32 15 20 37 81</li>'+
  '</ul>';


  var map = new google.maps.Map(mapElement, mapOptions);

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(officeLat, officeLng),
      icon: customPin,
      map: map
  });

  var parking1 = new google.maps.Marker({
    position: new google.maps.LatLng(parking1Lat, parking1Lng),
    icon: parkingPin,
    map: map
  });

  var parking2 = new google.maps.Marker({
    position: new google.maps.LatLng(parking2Lat, parking2Lng),
    icon: parkingPin,
    map: map
  })

  var infowindow = new SnazzyInfoWindow({
    marker: marker,
    content: contentString,
    wrapperClass: "infoBox",
    offset: {
      top: offsettop,
      left: offsetleft
    },
    backgroundColor: 'transparent',
    border: false,
    shadow: false,
    closeOnMapClick: false,
    showCloseButton: false

  })
      infowindow.open(map, marker);
}

Есть какие-нибудь подсказки на пути решения этой проблемы?

Answer 1

Вы должны попытаться добавить опцию fitBounds к вашему объекту карты, например:

var map = new google.maps.Map(mapElement, mapOptions);
map.fitBounds(this.map.bounds);

Подробнее о: Google Maps Api

Answer 2

Решается добавлением setTimeout, который центрирует карту в конце функции init. Это решение исходит из этого вопроса

 setTimeout(function () {
    google.maps.event.trigger(map, 'resize');
    var reCenter = new google.maps.LatLng(officeLat, officeLng);
    map.setCenter(reCenter);
 }, 500);