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

Я широко читал вопрос о добавлении динамически созданного содержимого infoWindow в карты Google Maps API v3, но мне трудно найти ответы, которые работают для моей реализации карты (я использую существующий скрипт под названием 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> 

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

Причина, по которой вы получаете все данные в информационных окнах, заключается в том, что вы вытаскиваете 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; ?> 

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

 $('.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 в / из веб-клиента.