动态谷歌地图

Question

I'm trying to create a dynamic Google Map with markers. The code works fine if the array data is added manually, but not when being pulled as an array variable.

printing the array on the console looks like this:

But this isn't working when it comes to the Google Map loop. However, this loop does work when the data is formatted like this:

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

I guess my question is, how would I format the dynamic array variable correctly within the script?

Here's the full script:

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);
      });

}

and the data collection from 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

Fixed by setting the function loop:

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;

and tweaking the script to use these vars:

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));
    }