• jasonblackdog

• in reply to: Google Maps – Custom marker location
• February 7, 2020 at 4:14 am

@tadej @ianmoiagroup-com – We are experiencing the same issues. It seems like the map will not accept a lat/long nor custom location via drag & drop. I believe it is the Geocoding API that allows this and we have confirmed that this service is available for our API key. I have attached a screenshot of all of our enabled APIs in case I’m missing something. Hopefully, there’s a fix soon.

My specs:

ACF PRO Version 5.8.7
WordPress 5.3.2
PHP Version: 7.3

Screen-Shot-....png

• jasonblackdog

• in reply to: ACF not saving fields – tried everything
• February 8, 2016 at 10:39 pm

Hi @tdmalone,
Yes, I was just sharing my experience with this issue as well. Regarding your issue, have you looked at the wp_options table to increase the options_name character length? See here: Link

Another possible similar issue was addressed using the .htaccess file and increasing the php memory limit. See here: Link

Please let me know if any of this helps.

• jasonblackdog

• in reply to: ACF not saving fields – tried everything
• February 2, 2016 at 12:25 am

Hi @tdmalone,
I had this same exact issue a while back and found it was actually how the custom field keys were being saved in the database. Essentially, once you reach a certain character limit (length) inside the database for these keys, they stop saving. I brought this up to ACF support and was directed to purchase the ACF PRO version as they save these fields in a different fashion and with greater lengths. After upgrading to ACF pro, the issues stopped happening and now have very complex nested repeaters that work flawlessly. Also to note, you will not lose any custom fields or data you have created in the regular version as ACF PRO imports all of the old info. Hope this helps.

• jasonblackdog

• in reply to: ACF Google Maps Rendering
• May 29, 2015 at 1:06 am

Hey @bigdropgr what I used was an onclick function on one of my tab buttons. Specifically this part of my code is what renders the map and resizes it to 100% width and height:

$(document).ready(function(){
        
		$( ".mapclick" ).one( "click", function() {
			//$('.mapclick').click(function(event) {			
          	$('.acf-map').each(function(){
				render_map( $(this) );
			});			
			
			$(window).resize(function() {
				$('.acf-map').height($(window).height() - 170);
			});
				
			$(window).trigger('resize');	
		});

		//$height = $('#wrapper').height();
    	//$('.acf-map').height($height);
		
    
    });

So on one of my tab buttons, I have the class name “mapclick”. Then in my code, I have when the button “mapclick” is clicked, render the map and resize.

Here is my tabs code:

<ul class="products-list">
    <li class="active info countbutton"><a href="#info"><span class="text">Info</span></a></li>
    <li class="photo countbutton"><a href="#photo" class="photoclick"><span class="text">Photos</span></a></li>
    <li class="video countbutton"><a href="#video"><span class="text">Videos</span></a></li>
    <li class="map countbutton"><a href="#map" class="mapclick"><span class="text">Maps</span></a></li>
    <li class="hour countbutton"><a href="#hour"><span class="text">Hours</span></a></li>
</ul>

Let me know if this makes sense.

• jasonblackdog

• in reply to: ACF Google Maps Rendering
• May 9, 2015 at 4:31 am

Alright, so I got what I wanted! Since I was using jQuery tabs on my page, I attached a click event to one of my tab links that loads the map. Now, it will only load the map when someone clicks that particular link/tab (which I’m okay with). So, on tab click, render map and resize to 100% width and height. Thank you @acf-support James for leading my in the right direction!

Here is my updated code:

<script type="text/javascript">
    (function($) {
    
    function render_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 );
		
		google.maps.event.addListenerOnce(map, 'idle', function(){
			 google.maps.event.trigger(map, 'resize');
			 center_map(map);
		 });
		 
    
    }
    
	
    function add_marker( $marker, map ) {
    
        // var
        var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    
        // create marker
        var marker = new google.maps.Marker({
            position	: latlng,
            map			: map
        });
    
        // 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 );
    
            });
        }
    
    }
    
    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(function(){
        
		$( ".mapclick" ).one( "click", function() {
			//$('.mapclick').click(function(event) {			
          	$('.acf-map').each(function(){
				render_map( $(this) );
			});			
			
			$(window).resize(function() {
				$('.acf-map').height($(window).height() - 170);
			});
				
			$(window).trigger('resize');	
		});

		//$height = $('#wrapper').height();
    	//$('.acf-map').height($height);
		
    
    });
	
    })(jQuery);
    </script>

• jasonblackdog

• in reply to: ACF Google Maps Rendering
• May 9, 2015 at 12:22 am

Hello James,
Thank you but…I tried adding it after the center_map(…) code but it still renders with the grey. Any other options? Just to confirm here is what my code looks like after adding your recommended code:

<script type="text/javascript">
    (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		: 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 );
		
		google.maps.event.addListenerOnce(map, 'idle', function(){
			 google.maps.event.trigger(map, 'resize');
			 center_map(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') );
    
        // create marker
        var marker = new google.maps.Marker({
            position	: latlng,
            map			: map
        });
    
        // 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 );
    
            });
        }
    
    }
    
    /*
    *  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
    */
    
    $(document).ready(function(){
    	
        $('.acf-map').each(function(){
    
            render_map( $(this) );
    		
        });
		
		
    
    });
    
    })(jQuery);
    </script>

• jasonblackdog

• in reply to: Cannot Add More Rows – Stops at 202
• October 6, 2014 at 11:53 pm

Hube2,
Thank you! This was the issue. There are several ways to adjust the settings for the max_input_vars via .htaccess, php.ini, etc. Although, I had to go through my actual hosting control panel (WHM) and increase the value through there – This option should be in WHM -> Service Configuration -> PHP Configuration Editor -> Advanced. It was set to 1000 so I increased it to 3000. Thank you so much for your help. I’m only wondering now if there are any security issues with this limit?

Thank you so much!
Jason