Support

Account

Home Forums General Issues Google Maps toggle markers

Solved

Google Maps toggle markers

    • futaba

    • January 29, 2019 at 11:49 pm

    I am showing multiple markers on frontend using ACF with custom post type (location). There are two types of location and I need to show or hide each location type with button/checkbox.

    I tried doing with jQuery but as the map is not part of the DOM, it did not work.

    My marker code is like the following

    <div class="marker <?php echo $type; ?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" data-img="<?php echo $type_icon; ?>">
        <div class="inside-marker">
    	    <h5 style="text-decoration:none"><?php echo $title; ?></h5>
    	    <?php
    	        if($client_type) {
    	         echo 'Client Type: '.$client_type.'<br>';   
    	        }
    	        if($project_end_date) {
    	         echo 'Project Ended: '.$project_end_date;       
    	        }
    	    ?>
    	</div>
    </div>
    • futaba

    • June 27, 2020 at 12:52 am

    I found the solution in this article

    https://itsmereal.com/advanced-custom-fields-google-map-markers-with-filters/

    Google Maps JS file

    (function($) {
    
    /*
    *  new_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 new_map( $el ) {
    	
    	// var
    	var $markers = $el.find('.marker');
    	
    	
    	// vars
    	var args = {
    		zoom		: 16,
    		center		: new google.maps.LatLng(0, 0),
    		mapTypeId	: google.maps.MapTypeId.ROADMAP
    	};
    	
    	
    	// 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 );
    	
    	
    	// return
    	return map;
    	
    }
    
    /*
    *  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') );
        var icon = $marker.attr('data-img');
        var type = $marker.attr('data-type');
        
    	// create marker
    	var marker = new google.maps.Marker({
    		position	: latlng,
    		map			: map,
    		icon        : icon,
    		type        : type
    	});
    
    	// add to array
    	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 Filter - NEW!
    */
    
    filterMarker = function (id) {
        for (i = 0; i < map.markers.length; i++) {
            marker = map.markers[i];
            
            if (document.getElementById(id).checked) {
                if (marker.type == id) {
                    marker.setVisible(true);
                } 
            }  else {
                if (marker.type == id) {
                    marker.setVisible(false);
                }
            }
            
        }    
    }
    
    /*
    *  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( 16 );
    	}
    	else
    	{
    		// fit to bounds
    		map.fitBounds( bounds );
    	}
    
    }
    
    /*
    *  document ready
    *
    *  This function will render each map when the document is ready (page has loaded)
    *
    *  @type	function
    *  @date	8/11/2013
    *  @since	5.0.0
    *
    *  @param	n/a
    *  @return	n/a
    */
    // global var
    var map = null;
    
    $(document).ready(function(){
    
    	$('.acf-map').each(function(){
    
    		// create map
    		map = new_map( $(this) );
    
    	});
     
    		    //zoom
    			google.maps.event.addListener( map, 'zoom_changed', function( e ) {
    	        
            	var zoom = map.getZoom();   
    			
                 if(zoom!= 5)           
                 {
    			var bounds = map.getBounds();
    			
                   myLatLngss = [];
                  	$.each( map.markers, function( i, marker ){			
    			var myLatLng = new google.maps.LatLng(marker.position.lat(), marker.position.lng() );	
    						
    			if(bounds.contains(myLatLng)===true) {						
                 		 myLatLngss.push( myLatLng );
    					}
    					else {
    						   
    					}
    			});
                   if(myLatLngss.length > 0)
                   { 
                     document.cookie = "coordn="+myLatLngss;
                     $("#customzm").load(location.href + " #customzm");                 
                   } 
                } 
    			       
    	       });
       google.maps.event.addListener(map, 'dragend', function() {
       //alert('map dragged');
       var bounds = map.getBounds();
    			
                      myLatLngss = [];
                  	$.each( map.markers, function( i, marker ){
    
    			var myLatLng = new google.maps.LatLng(marker.position.lat(), marker.position.lng() );	
    					
    			if(bounds.contains(myLatLng)===true) {						
                 		 myLatLngss.push( myLatLng );
    					}
    					else {
       
    					}
               if(myLatLngss.length > 0)
                   {
                     document.cookie = "coordn="+myLatLngss;
                     $("#customzm").load(location.href + " #customzm");                 
                   }
    			});
       
     } );
      			
    
    });
    
    })(jQuery);
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.