Gmaps.js - несколько маркеров с динамическим контентом infoWindow

Question

Я читал подробно о добавлении динамически созданного содержимого infoWindow к картам API Карт Google 3, но мне трудно найти ответы, которые работают для моей реализации map (Я использую существующий скрипт под названием gmaps.js). У меня ограниченный опыт работы с javascript и PHP, поэтому я надеюсь, что кто-то может указать мне в правильном направлении.

В настоящее время у меня установлены мои маркеры на карте, которую я использую для сайта Wordpress. Маркеры размещаются правильно в соответствии с координатами местоположения, указанными в базе данных, но соответствующий контент infoWindow (имя здания и адрес для каждого маркера на карте) отображается в каждом экземпляре infoWindow, а не только который относится к каждому конкретному маркеру.

Вот код, я использую (наряду со сценарием gmaps.js):

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

    <ul class="markers"> 

    <?php 
    $markers = get_field('locations', $post->ID); 

    foreach($markers as $m): ?> 

     <li><a data-latlng="<?php echo $m['location']['coordinates']; ?>" data-icon="<?php bloginfo('template_url'); ?>/assets/img/map_icons/<?php echo $m['icon']; ?>.png"></a></li> 

    <?php 
    endforeach; ?> 

    </ul> 

<script> 
$(function() { 

    var $body = $('body'), 
     $window = $(window); 

    if($body.hasClass('page-template-page_map-php')){ 

    var $map = $('#map'); 

    function set_map_height(){ 
     $map.height($(window).height() - $('#header').outerHeight()); 
    } 

    set_map_height(); 

    $window.on('resize', function(){ 

     set_map_height(); 

    }) 

    var map = new GMaps({ 
     div: '#map', 
     lat: 49.8994, 
     lng: -97.1392 
    }); 

    $('.markers li a').each(function(){ 

     var $this = $(this), 
      latlng = $this.data('latlng').split(','); 

     map.addMarker({ 
     lat: latlng[0], 
     lng: latlng[1], 
     title: 'Development', 
     click: function(e) { 
     }, 
     infoWindow: { 
      content: $("#location").html() + i 
     }, 
     icon: $this.data('icon') 
     }); 

    }); 

    map.fitZoom(); 
    } 

}); 

</script> 
<div id="location"> 
<?php 
$markers = get_field('locations', $post->ID); 
foreach($markers as $m): ?> 

<h3><?php echo $m['name']; ?></h3> 
<p><?php echo $m['location']['address']; ?></p> 

<?php 
endforeach; ?> 
</div> 

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

Answer 1

Причина, по которой вы получаете все данные в информационных окнах, заключается в том, что вы вытаскиваете HTML из div «location». Этот div заполняется ВСЕ данными, поскольку вы перебираете список маркеров.

Самый быстрый способ заставить это делать то, что вы хотите, это добавить поля имени и адреса в теги привязки в своем списке, который вы создаете в верхней части.

<ul class="markers"> 

<?php 
$markers = get_field('locations', $post->ID); 

foreach($markers as $m): ?> 

    <li><a data-latlng="<?php echo $m['location']['coordinates']; ?>" data-icon="<?php bloginfo('template_url'); ?>/assets/img/map_icons/<?php echo $m['icon']; ?>.png" data-name="<?php echo $m['name']; ?>" data-address="<?php echo $m['location']['address']; ?>></a></li> 

<?php 
endforeach; ?> 

Затем вы можете установить содержание информационного окна прямо в яваскрипта цикле.

$('.markers li a').each(function(){ 

    var $this = $(this), 
     latlng = $this.data('latlng').split(','), 
     name = $this.data('name'), 
     address = $this.data('address'); 

    map.addMarker({ 
    lat: latlng[0], 
    lng: latlng[1], 
    title: 'Development', 
    click: function(e) { 
    }, 
    infoWindow: { 
     content: "<b>Name:</b>" + name + "<br /><b>Address:</b>" + address 
    }, 
    icon: $this.data('icon') 
    }); 

}); 

Теперь, я хотел бы предложить изменить весь дизайн для этого использовать AJAX звонки и ваш PHP возвращает массив данных JSON, а не хранить все эти данные в DOM. Вы можете использовать функцию ajax JQuery и PHP json_encode/json_decode для передачи данных JSON в/из веб-клиента.