Карты Google LatLngBounds иногда не работает с объектом javascript

Question

У меня проблема с моей картой.Я использую функцию Google Maps LatLngBounds(), чтобы вычислить центр между двумя заданными точками.

Я могу получить местоположение, и я consoled.log значение (даже если по какой-то причине значения пусты, я все еще могу распечатать их на карте), поэтому я могуразместить свои маркеры на карте, но по какой-то причине, когда я добавляю функцию для границы, я ломаю карту, я получаю сообщение об ошибке и вижу только маркер (один маркер.

Вот мой код:

var locs;

function initMap() {

  var locations_two = [
    ['<div class=""><p>Vancouver</p></div>', 49.27597, -123.1185, 1],
    ['<div class=""><p>Ottawa</p></div>', 45.3683, -75.70258]
  ];

  locs = new google.maps.Map(document.getElementById('locs'), {
    center: {lat: 49.276873, lng: -123.118948},
    zoom: 4
  });

  var image = $myimage;

  var infowindow = new google.maps.InfoWindow();

  var marker_two, i;

  var bounds = new google.maps.LatLngBounds();

  for (i = 0; i < locations_two.length; i++) {
    var mybond = locations_two[i];
    var myLatLng = new google.maps.LatLng(mybond[1], mybond[2]);
    marker_two = new google.maps.Marker({
        position: myLatLng,
        map: locs,
        icon: image
    });
    bounds.extend(myLatLng);
    google.maps.event.addListener(marker_two, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations_two[i][0]);
            infowindow.open(map, marker);
        }
    })(marker_two, i));
    map.fitBounds(bounds);
  }

}

Как я уже сказал, я объявил переменную var bounds = new google.maps.LatLngBounds(); перед циклом, а затем использую две другие функции Google Map для вызова map.fitBounds(bounds); в самом конце, чтобы отцентрировать мою карту, но я получаю эту ошибку:

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'fitBounds' из неопределенного

Что не имеет смысладля меня, потому что переменная границ на самом деле определяется? Есть мысли?

Answer 1

С опубликованным кодом я получаю ошибку JavaScript (в Chrome):

Uncaught (в обещании) ReferenceError: карта не определена

Ваш google.maps.Mapобъект называется locs, а не map.Эта строка:

map.fitBounds(bounds);

должна быть:

locs.fitBounds(bounds);

подтверждение концепции скрипта

фрагмент кода:

var locs;

function initMap() {
  var locations_two = [
    ['<div class=""><p>Vancouver</p></div>', 49.27597, -123.1185, 1],
    ['<div class=""><p>Ottawa</p></div>', 45.3683, -75.70258]
  ];
  locs = new google.maps.Map(document.getElementById('locs'), {
    center: {
      lat: 49.276873,
      lng: -123.118948
    },
    zoom: 4
  });
  var infowindow = new google.maps.InfoWindow();
  var marker_two, i;
  var bounds = new google.maps.LatLngBounds();

  for (i = 0; i < locations_two.length; i++) {
    var mybond = locations_two[i];
    var myLatLng = new google.maps.LatLng(mybond[1], mybond[2]);
    marker_two = new google.maps.Marker({
      position: myLatLng,
      map: locs,
    });
    bounds.extend(myLatLng);
    google.maps.event.addListener(marker_two, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations_two[i][0]);
        infowindow.open(map, marker);
      }
    })(marker_two, i));
    locs.fitBounds(bounds);
  }
}

html,
body,
#locs {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="locs"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>