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

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

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

• Возможно ли предварительно загружать содержимое страницы с помощью техники ajax / jquery?
• Когда мне следует возвращать true / false AJAX, и когда я должен эхо «true» / «false»,
• Iframe Submission, затем перенаправление
• Загружать js при видимости
• Как запустить PHP-код, когда пользователь нажимает на ссылку?

Вот код, который я использую (вместе с скриптом 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> 

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

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