Динамические Карты Google

Question

Я пытаюсь создать динамическую карту Google с маркерами.Код работает нормально, если данные массива добавляются вручную, но не при извлечении в качестве переменной массива.

печать массива на консоли выглядит следующим образом:

Но это не работает, когда дело доходит до цикла Google Map.Однако этот цикл работает, когда данные форматируются следующим образом:

var locationsSupplier = [
  ['London, UK',51.5073509,-0.1277583],
  ['Surrey, UK',51.3147593,-0.5599501]
]

Наверное, мой вопрос: как бы я правильно отформатировал переменную динамического массива в скрипте?

Вотполный сценарий:

function initMap() {

    $ = jQuery;

    var locationsSupplier = [
        ['London, UK',51.5073509,-0.1277583],
        ['Surrey, UK',51.3147593,-0.5599501]
    ]


    // Icons
    var iconMain = {
        url: mapVar.path + '/assets/svg/misc/custom-pin-icon.svg',
        scaledSize: new google.maps.Size(64, 64),
    };

    var iconSupplier = {
        url: mapVar.path + '/assets/svg/misc/custom-pin-icon.svg',
        scaledSize: new google.maps.Size(48, 48),
    };


    // Map Defaults
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(mapVar.lat,mapVar.lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    });


    // Supplier markers and info popup
    var infowindowSupplier = new google.maps.InfoWindow();
    var markerSupplier, i;

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

      google.maps.event.addListener(markerSupplier, 'click', (function(markerSupplier, i) {
        return function() {
          infowindowSupplier.setContent(locationsSupplier[i][0]);
          infowindowSupplier.open(map, markerSupplier);
        }
      })(markerSupplier, i));
    }


    // Main marker and info popup
    var infowindow = new google.maps.InfoWindow();

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(mapVar.lat,mapVar.lng),
        map: map,
        icon: iconMain
      });

    marker.addListener('click', function() {
        infowindow.setContent(mapVar.address);
        infowindow.open(map, marker);
      });

}

и сбор данных из WP:

wp_register_script( 'gmaps-init', get_stylesheet_directory_uri() . '/assets/js/gmaps.js', array('jquery'),'',true  );
    wp_register_script( 'gmaps-js', '//maps.googleapis.com/maps/api/js?callback=initMap&key='.$google_api_key, array('jquery'),'',true  );

    wp_enqueue_script( 'gmaps-init' );

    $location = get_field('main_map_marker');
    $suppliers = array();   

    if(have_rows('suppliers')) : while(have_rows('suppliers')) : the_row();

      $supplier_marker = get_sub_field('supplier_marker');

      if($supplier_marker) {

        $lat = floatval($supplier_marker['lat']);
        $lng = floatval($supplier_marker['lng']);
        $address = $supplier_marker['address'];

        $suppliers[] = "'".$address."',".$lat.",".$lng;

      }

    endwhile; endif;

    $localData = array(
      'lat' => floatval($location['lat']),
      'lng' => floatval($location['lng']),
      'address' => $location['address'],
      'path' => get_stylesheet_directory_uri(),
      'suppliers' => $suppliers
    );

    wp_localize_script( 'gmaps-init', 'mapVar', $localData );
    wp_enqueue_script( 'gmaps-js' );

Answer 1

Исправлено путем установки функционального цикла:

if(have_rows('suppliers')) : while(have_rows('suppliers')) : the_row();

      $supplier_marker = get_sub_field('supplier_marker');

      if($supplier_marker) {

        $suppliers[] = array(
          'address' => $supplier_marker['address'],
          'lat' => floatval($supplier_marker['lat']),
          'lng' => floatval($supplier_marker['lng'])
        );

      }

    endwhile; endif;

и настройки скрипта для использования этих переменных:

f

or (i = 0; i < locationsSupplier.length; i++) {  
      markerSupplier = new google.maps.Marker({
        position: new google.maps.LatLng(locationsSupplier[i]['lat'], locationsSupplier[i]['lng']),
        map: map,
        icon: iconSupplier
      });

      google.maps.event.addListener(markerSupplier, 'click', (function(markerSupplier, i) {
        return function() {
          infowindowSupplier.setContent(locationsSupplier[i]['address']);
          infowindowSupplier.open(map, markerSupplier);
        }
      })(markerSupplier, i));
    }