API JavaScript для Google Карт: функция выбора маркеров

Question

Я создаю интерактивную карту для веб-сайта, созданного с помощью Squarespace (предпочтения друга) с использованием API Javascript Google Maps. В принципе, у меня появляется карта и все маркеры (они загружаются через массив объектов в формате [NAME, LAT, LONG, ADDRESS, PHONE, INFO]). Однако я хочу иметь возможность использовать прослушиватели на всех маркерах, чтобы при щелчке имя отображалось на ярлыке на карте, а затем появлялись все детали (адрес, телефон, информация) ниже. Я уже работал над исходным сайтом. Это было довольно просто. Но когда мой друг захотел перейти на Squarespace, мне пришлось узнать, как работает их инъекция кода. Вещи вводятся в заголовок, но я думаю, что моя проблема будет решена, если я смогу поместить код после тела.

В чем проблема: JQuery, используемый для заполнения деталей как на карте, так и под ней, ссылается на элементы DOM, которые не определены при загрузке сценария. Итак, я подумал, что нужно обернуть функцию в функцию $ (document) .ready. Когда я пытаюсь это сделать, карта вообще не загружается. Любые предложения о том, как я должен справиться с этим? Вот код для загрузки элементов из массива «места» и добавление слушателей:

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 

    bounds.extend(marker.position); 


    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      console.log(locations[i][0]); 
      $('#store-text').text(details[i][0]); 
      $('#store-text-2').text(details[i][1]); 
      $('#phone-text').text(details[i][2]); 
      $('#desc-text').text(details[i][3]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 

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

Answer 1

Любопытно, что карта и маркеры вообще отображают код в разделе главы по той же причине: google.maps.Map нужен элемент DOM, который не существует при запуске скрипта. Я также не могу найти что-либо в приведенных фрагментах кода, которые помешали бы этому работать корректно, если вы завернете его в блок $(document).ready (минус некоторые опечатки в примере кода). Вареная вниз пример коды работает для меня в основном тестирования с сокращенной версией готового блока документа:

$(function() { 
    locations = [ 
     ['Chicago', 41.834270, -87.670898, '1234 Chicago St.', '111-111-1111', 'Chicago Stuff'], 
     ['New York', 40.436495, -74.267578, '1234 New York St.', '222-222-2222', 'NY Stuff'], 
     ['Toronto', 43.647380, -79.409180, '1234 Toronto St.', '333-333-3333', 'Toronto Stuff'] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     center: { 
      lat: 42, 
      lng: -80 
     }, 
     zoom: 5 
    }); 

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

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       $('#store-text').text(locations[i][0]); 
       $('#store-text-2').text(locations[i][3]); 
       $('#phone-text').text(locations[i][4]); 
       $('#desc-text').text(locations[i][5]); 
       infowindow.open(map, marker); 
      } 
     }(marker, i))) 
    } 
}); 

и рабочим jsfiddle со сценариями погрузки в голове: http://jsfiddle.net/cwrke3mL/