Reply To: Add multiple markers on Gmap field in admin screen

• czokalapik

• July 31, 2016 at 6:43 pm

It turned out to be fairly simple, you need to enqueue your script using acf/input/admin_footer hook:

add_action( 'acf/input/admin_footer', function(){
	wp_enqueue_script('YOUR SCRIPT');
});

Then, using your repeater field name:

jQuery(document).ready(function(){
acf.add_action('load', function(){
	var $el = jQuery('.CLASS-OF-YOUR-REPEATER-FIELD-ALSO-IT'S-FIELD-NAME tbody tr') // find in your DOM what class it is and loop for every row
	if(acf.fields.google_map.map) {$el.each(function(){
		var ll = jQuery(this).find('[data-name="latlng"] .acf-input .acf-input-wrap input').val().split(',') // one of my fields is "latlng", there i have lat & lng separated by comma, if you have 2 different fields, catch them both
		var latlng = new google.maps.LatLng(ll[0],ll[1]);
		  var circle ={
				path: google.maps.SymbolPath.CIRCLE,
				fillColor: '#b2026d',
				fillOpacity: .6,
				scale: 7.5,
				strokeColor: 'white',
				strokeWeight: 1
			};
		var marker = new google.maps.Marker({
			position	: latlng,
			map			: acf.fields.google_map.map, // this is map object created by ACF, you are simply adding markers to it
			icon		: circle,
			zIndex		: 9
		});
 });
 acf.fields.google_map.map.setZoom(16); //i'm also changing zoom on the fly here
 }
 });
});