Добавление маркеров в Карты Google в цикле не работает

Question

Я пытаюсь загрузить несколько случайных маркеров на карту Google. Когда я запускаю следующий скрипт, он создает только один маркер, на который ссылается функция инициализации карты. Я в полном недоумении. Non-area находится после объявления функции addMarker. Я знаю, что цикл выполняется через console.log, но он не размещает маркеры на карте.

var map;
var northeast;
var southeast;
var northwest;
var southwest;
var markers = [];
var lat = (Math.random() * (80 - -80) + -80).toFixed(7) * 1;
var lng = (Math.random() * (170 - -170) + -170).toFixed(7) * 1;

function initMap() {  
  var randomMarker = {lat: lat, lng: lng}; 

 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: 0, lng: 0},
    mapTypeId: 'terrain',
    disableDefaultUI: true,
    zoomControl: false,
    scrollwheel: false,
    draggable: false
  }); 

   // Adds a marker at the center of the map.   
  addMarker(randomMarker);
}

 // Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map,
          animation: google.maps.Animation.DROP,
          icon: "https://maps.google.com/mapfiles/ms/icons/blue.png",
          scaledSize: new google.maps.Size(22, 22)
        });
        for (var i = 0; i < 10; i++) {
            markers.push(marker);
        }
      }


// Test loop

function testHello() {
  for (var i = 0; i < 10; i++) {
    console.log("hello world");
  }
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Checkbox function for Northeast quadrant
$('#neVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});

// Checkbox function for Southeast quadrant
$('#seVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});


// Checkbox function for Northwest quadrant
$('#nwVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});


// Checkbox function for Southwest quadrant
$('#swVisible').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
         setMapOnAll(map);
    } else {
         setMapOnAll(null);
    }
});

Answer 1

Функция addMarker вызывается один раз из функции initMap.

// Adds a marker at the center of the map.   
  addMarker(randomMarker);

Функция addMarker создаст только один маркер

// Adds a marker to the map and push to the array.

 function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: "https://maps.google.com/mapfiles/ms/icons/blue.png",
      scaledSize: new google.maps.Size(22, 22)
    });
    for (var i = 0; i < 10; i++) {
        markers.push(marker);
    }
  }

Цикл for добавляет один и тот же маркер к маркерному массиву 10 раз.

for (var i = 0; i < 10; i++) {
    markers.push(marker);
}

Благодаря этому все маркеры будут нанесены на одну и ту же точку, и будет выглядеть так, будто у вас есть только один маркер на карте. Чтобы устранить проблему, вам нужно несколько раз вызвать функцию addMarker и изменить ее следующим образом:

function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
    animation: google.maps.Animation.DROP,
    icon: "https://maps.google.com/mapfiles/ms/icons/blue.png",
    scaledSize: new google.maps.Size(22, 22)
  });

  markers.push(marker);
}

Это создаст новый маркер и добавит его в массив маркеров. Отредактируйте функцию initMap для создания случайных координат и добавления маркеров в этих местах. Попробуйте уменьшить масштаб карты, чтобы просмотреть все маркеры вместе.

function initMap() {  

 map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: 0, lng: 0},
    mapTypeId: 'terrain',
    disableDefaultUI: true,
    zoomControl: false,
    scrollwheel: false,
    draggable: false
  }); 

  for (var i = 0; i < 10; i++) {
    var lat = (Math.random() * (80 - -80) + -80).toFixed(7) * 1;
    var lng = (Math.random() * (170 - -170) + -170).toFixed(7) * 1;
    var randomMarker = {lat: lat, lng: lng}; 

   // Adds a marker at the center of the map.   
   addMarker(randomMarker);
  }
}