Contact

.acf-map{
height: 100%;
}
.acf-map img {
max-width: inherit !important;
}

(function( $ ) {

// Render maps on page load.

var map;

$(document).ready(function(){
map = initMap($(‘.acf-map’));

if($(« #agences-list »).length > 0)
{
$(« #agences-list .agence-item »).hover(function(){

$(« #agences-list .agence-item »).each(function(){
$(this).removeClass(‘active’);
});

var id = $(this).data(‘id’);

$(map.markers).each(function(){
this.setAnimation(null);
if(this.get(‘id’) == id)
this.setAnimation(google.maps.Animation.BOUNCE);
});
});
}
});

/**
* initMap
*
* Renders a Google Map onto the selected jQuery element
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @return object The map instance.
*/
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,
styles: [
{
« stylers »: [
{
« saturation »: -100
},
{
« lightness »: 15
}
]
}
]
};

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 );

// Return map instance.
return map;
}

/**
* initMarker
*
* Creates a marker for the given jQuery element and map.
*
* @date 22/10/19
* @since 5.8.6
*
* @param jQuery $el The jQuery element.
* @param object The map instance.
* @return object The marker instance.
*/
function initMarker( $marker, map) {

// Get position from marker.
var lat = $marker.data(‘lat’);
var lng = $marker.data(‘lng’);
var icon = $marker.data(‘icon’);
var id = $marker.data(‘id’);
var latLng = {
lat: parseFloat( lat ),
lng: parseFloat( lng )
};

// Create marker instance.
var marker = new google.maps.Marker({
id: id,
position : latLng,
map: map,
icon: {
url: icon,
scaledSize: new google.maps.Size(40, 52.6)
}
});

// 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 );
});
}

marker.addListener(‘click’, function(){
$(map.markers).each(function(){
this.setAnimation(null);
if(this.get(‘id’) > 0)
if($(‘#agences-list #agence-‘+this.get(‘id’)).length > 0)
$(‘#agences-list #agence-‘+this.get(‘id’)).removeClass(‘active’);
});
marker.setAnimation(google.maps.Animation.BOUNCE);

if(marker.get(‘id’) > 0)
{
if($(‘#agences-list #agence-‘+marker.get(‘id’)).length > 0)
{
var scrollTop = $(‘#agences-list #agence-‘+marker.get(‘id’)).offset().top – $(‘#agences-list’).offset().top + $(‘#agences-list’).scrollTop();
$(‘#agences-list’).animate({scrollTop: scrollTop, scrollLeft: 0},300);
$(‘#agences-list #agence-‘+marker.get(‘id’)).addClass(‘active’);
}
}

});
}

/**
* centerMap
*
* Centers the map showing all markers in view.
*
* @date 22/10/19
* @since 5.8.6
*
* @param object The map instance.
* @return void
*/
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 );
}
}
})(jQuery);