Google maps - несколько маркеров с уникальными информационными окнами

Question

Я создаю карту для пользователей на моем сайте.Как это работает, я использую PHP и AJAX для получения всех адресов пользователей сайтов, затем я передаю эти значения в JS как JSON, где я генерирую карту Google, центрированную вокруг адреса текущего пользователя, с маркером для каждого пользователя на карте.Эта часть работает в данный момент, но я борюсь с тем, чтобы создать уникальное информационное окно для каждого пользователя.Как сейчас, я получаю одинаковое информационное окно для всех маркеров, как я могу это исправить?

JS

jQuery(document).ready(function($){
    $.ajax({
        url: ajax_url,
        type: 'post',
        dataType: 'json',
        data: { 
            action: 'map' 
        },
        error : function(response){
            console.log(response);
        },
        success : function(response){
            var mapOptions = {
                zoom: 16,
            }

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

            // current user position
            geocoder.geocode({'address': response.current[0].postcode}, function(results, status){
                map.setCenter( results[0].geometry.location );

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            });

            // other users loop
            for( var i = 0; i < response.other.length; i++ ){
                var postcode = response.other[i].postcode;

                geocoder.geocode( {'address': postcode}, function(results, status){
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });

                    google.maps.event.addListener(marker, 'click', function(){
                        infowindow.close(); // Close previously opened infowindow
                        infowindow.setContent( "<div id='infowindow'>"+ postcode +"</div>");
                        infowindow.open(map, this);
                    });
                });
            }

            var map = new google.maps.Map(document.getElementById("buddy_map"), mapOptions);

            return false;
        }
    });
});

PHP

add_action('wp_ajax_nopriv_map', 'addresses');
add_action('wp_ajax_map', 'addresses');


function addresses(){
    global $current_user;

    $address_street = get_user_meta( $current_user->ID, 'shipping_address_1', true );
    $address_city = get_user_meta( $current_user->ID, 'shipping_city', true );
    $address_postcode = get_user_meta( $current_user->ID, 'shipping_postcode', true );
    $address = $address_street . ', ' . $address_city . ', ' . $address_postcode;

    $cur_user[] = array(
        "postcode" => $address
    );

    $other_users[] = array(
        "postcode" => "LS11 6NA"
    );

    $other_users[] = array(
        "postcode" => "LS11 6LY"
    );

    echo json_encode( array( "current" => $cur_user, "other" => $other_users) );

    die();
}

Я знаю, что мой файл PHP нуждается в некоторой работе, это просто грубаячерновик, чтобы заставить это работать первым.

Answer 1

Вам необходимо использовать замыкание в цикле for.

Вы можете прочитать документацию Google на Использование замыканий в прослушивателях событий .

См. Базовый пример ниже и обратите внимание на использование замыкания в прослушивателе событий щелчка маркера.

function initialize() {

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(1, 1)
    };

    var locations = [
        [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
        [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
        [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
        [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
        [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
        [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

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

    for (var i = 0; i < locations.length; i++) {

        var marker = new google.maps.Marker({
            position: locations[i][0],
            map: map,
            title: locations[i][1]
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {

            return function () {
                infowindow.setContent(locations[i][2]);
                infowindow.open(map, marker);
            }

        })(marker, i));
    }
}

#map-canvas {
  height: 160px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>

Для иллюстрации с использованием геокодера см. Фрагмент ниже. Как я сказал в комментарии, сервис Geocoder имеет ограничение QPS в 50 запросов в секунду. Если ваш список местоположений содержит более 50 элементов, вполне вероятно, что он потерпит неудачу, поскольку цикл будет выполнен менее чем за 1 секунду.

function initialize() {

  var geocoder = new google.maps.Geocoder();
  var mapOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(40.718193, -74.001339)
  };

  var locations = [
    ['Marker 1', 'Infowindow content for Marker 1', '10001, USA'],
    ['Marker 2', 'Infowindow content for Marker 2', '10002, USA'],
    ['Marker 3', 'Infowindow content for Marker 3', '10003, USA'],
    ['Marker 4', 'Infowindow content for Marker 4', '10004, USA'],
    ['Marker 5', 'Infowindow content for Marker 5', '10005, USA'],
    ['Marker 6', 'Infowindow content for Marker 6', '10006, USA']
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var infowindow = new google.maps.InfoWindow();

  for (var i = 0; i < locations.length; i++) {

    geocoder.geocode({
      'address': locations[i][2]
    }, (function(locations, i) {

      return function(results, status) {

        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          title: locations[i][0]
        });

        google.maps.event.addListener(marker, 'click', (function(marker) {

          return function() {

            infowindow.setContent("<div id='infowindow-content'><h3>" + locations[i][1] + "</h3>" + results[0]['formatted_address'] + "</div>");
            infowindow.open(map, marker);
          }

        })(marker));
      }
    })(locations, i));
  }
}

#map-canvas {
  height: 160px;
}

<div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>