Replace default Google Maps marker for several locations (repeater field)

• cgoldt

• March 2, 2017 at 11:06 pm

Hi,

I’m using the repeater field to render multiple markers on my Google Map. I’m using the code from the Documentation, that works perfectly:

<?php if( have_rows('locations') ): ?>
<div class="acf-map">
<?php while ( have_rows('locations') ) : the_row(); 

$location = get_sub_field('location');

?>
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h4><?php the_sub_field('title'); ?></h4>
<p class="address"><?php echo $location['address']; ?>

<?php the_sub_field('description'); ?>

</div>
<?php endwhile; ?>
</div>
<?php endif; ?>

How can I implement a third field (image) to define a custom marker for each location to replace the default Google marker? Would be happy to get some help!
Thanks, Cara

• James

• March 12, 2017 at 8:03 pm

Hi @cgoldt

You can do this with the following code:

// create marker
	var marker = new google.maps.Marker({
		position: latlng,
		map:      map,
		title:    'Custom',
		icon:     'http://www.example.com/application/static/images/gmap-marker.png' 
	});

I hope this info helps.