Incrementing a foreach loop and only showing one child

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? i.e So one say "MediWales" and the other says "Teamworks Design & Marketing", and so on when I add more companies.

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.

UPDATE: It seems like it's very close, it's showing one company but the same one on both markers.

<?php 
$counter = 1; 
$pages = get_pages(array('child_of' => 1873, 'sort_column' => 'menu_order', 'offset' => $counter, 'number' => 1)); 
foreach($pages as $post) { 
setup_postdata($post); 
$fields = get_fields(); ?> 
<p><?php echo $fields->company_name; echo $counte开发者_如何学Cr; ?></p>
<?php $counter++; } 
wp_reset_query(); ?>

---

Your issue is the fact that PHP is by nature preprocessed. JavaScript doesn't run that PHP everytime you click that marker.

Your best bet is to output a JSON object from PHP containing all the markers and their attributes, then parse it dynamically with JavaScript.