I am using the Google Maps API v3 with InfoBox to style the pop-ups that appear when a marker is clicked.
Here is my InfoBox setup:
infobox = new InfoBox({
content: document.getElementById('marker-info'),
disableAutoPan: false,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
closeBoxMargin: '10px 9px 12px 0',
closeBoxURL: siteURL + 'wp-content/themes/bmk-wp-build/img/close-google-popup.png',
infoBoxClearance: new google.maps.Size(1, 1)
});
I have a Google map with many markers that is configured using Wordpress using the ACF and Locations fields. Everything works fine, but the only problem is that it InfoBoxdisplays the same content for each marker. This is obviously related to this line:
content: document.getElementById('marker-info'),
Here is my PHP / HTML:
<?php while ( $company_query->have_posts() ) : $company_query->the_post(); ?>
<?php $location = get_field('location'); if ( !empty($location) ) : ?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" id="<?php echo get_the_ID(); ?>">
<div id="marker-info" class="marker-info <?php echo get_the_ID(); ?>">
<?php echo wp_get_attachment_image(get_field('logo'), 'full'); ?>
</div>
</div>
<?php endif; ?>
<?php endwhile; ?>
Obviously, having the idgiven in the while loop is a bad idea and stupid, so I can obviously get rid of this, but how would I change:
content: document.getElementById('marker-info'),
to get every .marker-info for every infobox for every token?