Reply To: Google Maps JS Alert

• Daron

• October 15, 2014 at 4:40 am

Great news! We have progress! I took a stab at delving into the ACF core JS files and I think I have found the problem.

The issue lies within the input.js that spits out all the javascript for ACF to function. I suspect the same code is within google-map.js but I didn’t want to screw around with enqueueing it and de-registering the rest of them.

I started by commenting out all the JS regarding Gmaps, and slowly uncommenting it out to see where the weird reload was coming from. This narrowed it down to this function call.

Around line 4105, you will find the acf/setup_fields function. Here is where the problem lies.

	/*
	*  acf/setup_fields
	*
	*  run init function on all elements for this field
	*
	*  @type	event
	*  @date	20/07/13
	*
	*  @param	{object}	e		event object
	*  @param	{object}	el		DOM object which may contain new ACF elements
	*  @return	N/A
	*/
	
	acf.add_action('ready append', function( $el ){
		
		//vars
		var $fields = acf.get_fields({ type : 'google_map'}, $el);
		
		
		// validate
		if( !$fields.exists() )
		{
			return;
		}
		
		
		// validate google
		if( typeof google === 'undefined' )
		{
			$.getScript('https://www.google.com/jsapi', function(){
			
			    google.load('maps', '3', { other_params: 'sensor=false&libraries=places', callback: function(){
			    
			        $fields.each(function(){
					
						acf.fields.google_map.set({ $el : $(this).find('.acf-google-map') }).init();
						
					});
			        
			    }});
			});
			
		}
		else
		{
			$fields.each(function(){
				
				acf.fields.google_map.set({ $el : $(this).find('.acf-google-map') }).init();
				
			});
			
		}
		
		
	});

The variable and the first statement are harmless. The if statement just checks to see if any google map fields exist. The issue is further narrowed to the “Validate Google” part of the function. If you comment out that whole if/else statement, the field will not load, however, no warning will be triggered.

I’m struggling to see how the else statement fits into the picture as well. At first I thought it was for rendering fields after the initial first map, but adding console comments show that the if part of the function is called for each map field regardless of other maps on the page.

If you comment out the if part of the function, and just leave the else (removing the “else” and curly brackets so it triggers correctly), a google is undefined error is thrown and the map doesn’t load. However, there is no warning when navigating away.

I feel like I’m rambling now, but the issue lies within the if statement. I have a feeling that this is because something in the pages <form> element is being altered by the rendering of the map, triggered from this location. This triggers the warning message when trying to navigate away from the page.

I’ve examined the input.js file from v4 (current on repo) and there doesn’t seem to be a lot of differences. There was the call in v4 to a function called is_clone_field but adding that to v5 returned undefined.

So this is where my knowledge ends. I also feel like I may be rambling 🙂

I’m tagging a couple people so hopefully this can get resolved! It’s a very strange error but it definitely needs to be addressed. One of the great things about ACF is the awesome user interface as well as the well thought out UX. This bug is a game-breaker on that front though. Clients shouldn’t feel like all their work is lost every time they want to navigate away from one of these pages. It’s a false sense of unease that shouldn’t be there.

Hope this helps!

@fatbeehive @Elliot Condon

@bobz @aditron @strommerm