Не могу нарисовать массив маркеров из массива объектов

Question

Я пытаюсь разместить маркеры на карте, учитывая данные в массиве объектов. Используя пример кода из документации API Карт Google, я могу разместить один маркер, но как только я доберусь до маркеров, я действительно хочу, чтобы ничего не произошло. Я могу видеть данные маркеров с помощью console.log (), но маркеры не будут размещены на карте.

Единственная ошибка, которую я получаю, - это вызов скрипта перед Google Maps API. В остальном все остальное вроде бы нормально (карта загружается).

Все файлы запускаются с использованием файла: //.

Я, наверное, упускаю что-то ослепительно очевидное. Я только начал изучать JavaScript несколько дней назад и API Карт сегодня утром.

Код построения карты.

  var myLatLng = {lat: 36.602414870756, lng: -105.08904326937};

  var mapOptions = {
    zoom: 12,
    mapTypeId: 'hybrid',     //'satellite' with labels
    disableDoubleClickZoom: true,
    rotateControl: false,
    mapTypeControl: false,
    fullscreenControl: false,
    center: myLatLng
  };
  var globalMap = new google.maps.Map(document.getElementById('map'), mapOptions);

Исходный массив.

var staffedCamps = [
...,
{
  id: 5,
  Name: "Black Mountain",
  lat: -105.0931424,
  long: 36.44229773,
  UTM_E: 491633.5115,
  UTM_N: 4033044.5622,
  Type: "Staff"
},
...,

Код, строящий массив маркеров.

var markerData = new Array()
for (let newMark = 0; newMark < staffedCamps.length; newMark++) {
  var cMark = staffedCamps[newMark];
  markerData.push(new google.maps.Marker({
    position: {lat:cMark.lat, lng:cMark.long},
    map: globalMap,
    title: cMark.Name,
    label: cMark.Name
  }));
console.log(markerData)

HTML

<div id="map"></div>
<script defer src="main.js" onload="initMap()"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script defer src="https://maps.googleapis.com/maps/api/js?key=some_api_key&callback=initMap"></script>

Answer 1

Я сделал пример, чтобы поставить несколько маркеров, я использую это new google.maps.Marker для создания многих маркеров

var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(41.38, 2.18);
  var myLatlng2 = new google.maps.LatLng(41.37, 2.17);

  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  var array = [{
      draggable: true,
      position: myLatlng,
      map: map,
      title: "Your location"
    },
    {
      draggable: true,
      position: myLatlng2,
      map: map,
      title: "Your location"
    }
  ]

  markerNow();

  function markerNow() {
    for (let i = 0; i < array.length; i++) {
      var marker = new google.maps.Marker(array[i]);
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>