Gmaps.js - multiple markers with dynamic infoWindow content

Question

I've been reading extensively on the topic of adding dynamically generated infoWindow content to Google Maps API v3 maps, but I'm having trouble finding answers that work for my implementation of the map (I'm using an existing script called gmaps.js). I have limited experience with javascript and PHP, so I'm hoping someone can point me in the right direction.

Currently, I have my markers set up on a map I'm using for a Wordpress site. The markers are properly placed in accordance with the location coordinates specified in the database, but the corresponding infoWindow content (a building name and address for each marker on the map) is displaying all at once in every instance of the infoWindow, rather than only the content that pertains to each specific marker.

Here's the code I'm using (along with the gmaps.js script):

<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>

Thanks SO much for any help, and my apologies if I haven't included enough detail.

Answer 1

The reason you are getting all of the data in the info windows is because you are pulling the HTML from the "location" div. This div is getting populated with ALL of the data as you are looping over the list of markers.

The quickest way to get this to do what you want would be to add the name and address fields to the anchor tags in your list you generate at the top.

<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; ?>

Then you can set the info window content directly in your javascript loop.

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

});

Now, I would suggest changing the entire design for this to use AJAX calls and have your PHP return an array of JSON data rather than storing all of this data in the DOM. You can use JQuery's ajax function and PHP json_encode/json_decode to pass JSON data to/from the web client.