Skip to content

Instantly share code, notes, and snippets.

@santanup789
Last active January 14, 2022 14:19
Show Gist options
  • Save santanup789/e31f4f0b3b712ccc35258f1f316def2a to your computer and use it in GitHub Desktop.
Save santanup789/e31f4f0b3b712ccc35258f1f316def2a to your computer and use it in GitHub Desktop.
Google map multiple marker with clickable location list which makes the marker pointer centar to the map after click. With marker binding feature. [WordPress ACF repeater fields for locations required.]
<?php
?>
<script src="https://maps.googleapis.com/maps/api/js?key=<?php the_field('gmap_api_key', 'option'); ?>"></script>
<style>
.acf-map { height: 400px; }
p.emails a:not(:last-child)::after {
content: ', ';
}
</style>
<?php if( have_rows('address', 'option') ): ?>
<div class="acf-map" data-zoom="16">
<?php while ( have_rows('address', 'option') ) : the_row();
// Load sub field values.
$location = get_sub_field('office_on_map','option');
$title = get_sub_field('office_name','option');
$description = get_sub_field('office_address','option');
?>
<div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>">
<h3><?php echo esc_html( $title ); ?></h3>
<p><?php echo esc_html( $description ); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php if( have_rows('address', 'option') ): ?>
<ul class="location_list">
<?php while ( have_rows('address', 'option') ) : the_row();
$title = get_sub_field('office_name','option');
?>
<li><?php echo esc_html( $title ); ?></li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<script type="text/javascript">
(function( $ ) {
/**
* initMap
*
* Renders a Google Map onto the selected jQuery element
*/
function initMap( $el ) {
// Find marker elements within map.
var $markers = $el.find('.marker');
// Create gerenic map.
var mapArgs = {
zoom : $el.data('zoom') || 16,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map( $el[0], mapArgs );
// Add markers.
map.markers = [];
$markers.each(function(){
initMarker( $(this), map );
});
// Center map based on markers.
centerMap( map );
$('.location_list li').each(function(i, e) {
$(e).click(function(i) {
return function(e) {
google.maps.event.trigger(map.markers[i], 'click');
}
}(i));
});
// Return map instance.
return map;
}
function initMarker( $marker, map ) {
// Get position from marker.
var lat = $marker.data('lat');
var lng = $marker.data('lng');
var latLng = {
lat: parseFloat( lat ),
lng: parseFloat( lng )
};
// Create marker instance.
var marker = new google.maps.Marker({
position : latLng,
map: map
});
// Append to reference for later use.
map.markers.push( marker );
// If marker contains HTML, add it to an infoWindow.
if( $marker.html() ){
// Create info window.
var infowindow = new google.maps.InfoWindow({
content: $marker.html()
});
// Show info window when marker is clicked.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
map.setCenter(this.getPosition());
map.setZoom(17);
map.panTo(this.getPosition());
});
}
}
/**
* centerMap
*
* Centers the map showing all markers in view.
*/
function centerMap( map ) {
// Create map boundaries from all map markers.
var bounds = new google.maps.LatLngBounds();
map.markers.forEach(function( marker ){
bounds.extend({
lat: marker.position.lat(),
lng: marker.position.lng()
});
});
// Case: Single marker.
if( map.markers.length == 1 ){
map.setCenter( bounds.getCenter() );
// Case: Multiple markers.
} else{
map.fitBounds( bounds );
}
}
// Render maps on page load.
$(document).ready(function(){
$('.acf-map').each(function(){
var map = initMap( $(this) );
});
});
})(jQuery);
</script>
<?php
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment