ACF Google Maps - SetCenter.js

setCenter-markup.php

<!-- 

1. Seguir la siguiente documentacion: https://www.advancedcustomfields.com/resources/google-map/

2. El siguiente markup generara una lista de botones con el nombre de cada ubicación subida via 
custom fields, cada boton obtiene la clase de 'setCenter' y hereda como atributos HTML5 la 
latitud y longitud de la ubicacion seleccionada.

-->


<div class="container-fluid">
		<?php if( have_rows('locations') ): ?>
			<?php while ( have_rows('locations') ) : the_row(); ?>
				<?php $location = get_sub_field('location'); ?>
				<button class="setCenter" type="button" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
				 <?php the_sub_field('title'); ?> 
				</button>
			<?php endwhile; ?>
		<?php endif; ?>
</div>

setCenter.js

function changeCenter(loc) {
  map.setZoom(12);
  map.setCenter(loc);
}

$(".setCenter").click(function() {
  var lat = $(this).data('lat');
  var lng = $(this).data('lng');
  var location = {
    lat: lat,
    lng: lng
  };
  changeCenter(location);
});