Stepping through a foreach loop - adding +1 to the end of it so next time it loops it starts on item 2

Question

I'm creating a custom Google map that plots multiple markers.

View the link as it will make it easier to explain what is happening and what I want

If you click on each marker it shows company names that are grabbed from the child pages. At the moment it's showing ALL the company names on each marker. How can I show just one company name per marker?

Here's the code controlling the little popup:

<?php $pages = get_pages(array('child_of' => 1873, 'sort_column' => 'menu_order')); 
$counter = 1;
foreach($pages as $post) 
{
setup_postdata($post); 
$fields = get_fields(); ?> 
<p><?php $counter++; echo $fields->company_name;?></p>
<?php } wp_reset_query(); ?>

Once it's looped through once, the next time it loops through I need it to start on the next child and not show the first one.

Answer 1

Use the offset argument, and only get 1 result:

global $my_page_offset;

if(!isset($my_page_offset))
  $my_page_offset = 0;

$pages = get_pages(array(
  'child_of'    => $post->ID, 
  'sort_column' => 'menu_order', 
  'offset'      => $my_page_offset, 
  'number'      => 1,
));

$my_page_offset++;

...

I'm assuming here that you don't have much control over these loops, because you're doing them multiple times. This is why the global variable...

---

Last try:

After var infowindow; add this:

<?php

$pages = get_pages(array('child_of' => $post->ID, 'sort_column' => 'menu_order'));
$data = array();
foreach($pages as $post){
  setup_postdata($post);
  $fields = get_fields(); 
  $data[] = '<p>'.$fields->company_name.'</p>';
}
wp_reset_query();

// the js array
echo 'var marker_data = ["'.implode('","', $data).'"];';
?>

Now infowindow.setContent should be:

infowindow.setContent(marker_data[i]);

Answer 2

Figured out that the php within the JS needed to be json encoded:

echo 'var marker_data = ' . json_encode($data) . ';';