MarkerClusterer and google map field

• PUShAUNE

• March 2, 2017 at 3:13 am

Hi !
I’ve been trying to use the MarkerClusterer one a google Map.
I’m supposed to paste this line somewhere in the google-maps.js, but I can’t find anywhere in any tutos where 🙁
var markerCluster = new MarkerClusterer(map, markers, options);

Do any of ypu know where to paste it?
In case of, here is my google-maps.js:

(function($) {
 
/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type function
*  @date 8/11/2013
*  @since 4.3.0
*
*  @param $el (jQuery element)
*  @return n/a
*/
 
function render_map( $el ) {
 
	 // var
	 var $markers = $el.find('.marker');
	 
	 // vars
	 var args = {
		 zoom : 4,
		 center : new google.maps.LatLng(0, 0),
		 mapTypeId : google.maps.MapTypeId.ROADMAP,
		 // How you would like to style the map. 
		// This is where you would paste any style found on Snazzy Maps.
		styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
	 };

	 
	 // create map          
	 var map = new google.maps.Map( $el[0], args);
	 
	 // add a markers reference
	 map.markers = [];
	 
	 // add markers
	 $markers.each(function(){
	 
	     add_marker( $(this), map );
	 
	 });
	 
	 // center map
	 center_map( map );

	 //var markerCluster = new MarkerClusterer(map, markers, options);
	}
	 
// create info window outside of each - then tell that singular infowindow to swap content based on click
var infowindow = new google.maps.InfoWindow({
content     : '' 
});

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $marker (jQuery element)
*  @param   map (Google Map object)
*  @return  n/a
*/

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

// icons
var icon = $marker.attr('data-icon');
var image = {
        url: $marker.attr('data-icon'),
        scaledSize : new google.maps.Size(30, 30)
    };

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map,
	icon : image
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{

    // show info window when marker is clicked & close other markers
    google.maps.event.addListener(marker, 'click', function() {
        //swap content of that singular infowindow
                infowindow.setContent($marker.html());
                infowindow.open(map, marker);
    });

    // close info window when map is clicked
         google.maps.event.addListener(map, 'click', function(event) {
            if (infowindow) {
                infowindow.close(); }
            }); 

}

}

	 
	/*
	*  center_map
	*
	*  This function will center the map, showing all markers attached to this map
	*
	*  @type function
	*  @date 8/11/2013
	*  @since 4.3.0
	*
	*  @param map (Google Map object)
	*  @return n/a
	*/
	 
	function center_map( map ) {
	 
	 // vars
	 var bounds = new google.maps.LatLngBounds();
	 
	 // loop through all markers and create bounds
	 $.each( map.markers, function( i, marker ){
	 
	 var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
	 
	 bounds.extend( latlng );
	 
	 });
	 
	 // only 1 marker?
	 if( map.markers.length == 1 )
	 {
	 // set center of map
	     map.setCenter( bounds.getCenter() );
	     map.setZoom( 4 );
	 }
	 else
	 {
	 // fit to bounds
	 map.fitBounds( bounds );
	 }
	 
	}

	 
	$(document).ready(function(){
	 
	 $('.acf-map').each(function(){
	 
	 render_map( $(this) );
	 
	 });
	 
	}); 

})(jQuery);

• PUShAUNE

• March 2, 2017 at 8:53 pm

Got it!
You have to add this function before rendering the map :

function markerCluster( markers, map ) {
	var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'YOURPATHHERE/images/m'});
	console.log( markers );
}

• ysam

• November 15, 2018 at 7:15 pm

HI May I know what is the settings in your acf map? what are the fields need to include clusters?