Support

Account

Home Forums Front-end Issues Trouble with Google Map

Solved

Trouble with Google Map

  • I’ve followed the tutorial on how to setup Google Map with multiple markers here. But the map sometimes work, and other times, it display a blank map. When looking at the Dev Console, it outputs several errors, particularly this: Uncaught RangeError: Maximum call stack size exceeded.

    Did some reading on the Internet and found that it might be caused by a string passed in the lat or lng, when it only accept numbers. I copied and pasted the required js and css codes, did nothing to change it, and for outputting the multiple markers on the page, I modified the example code slightly to correspond to the ACF that I have (i’m not using a repeater field). Here’s my code:

    
    <?php 
    $posts = get_posts(array(
    	'posts_per_page'	=> -1,
    	'post_type'			=> array('museumobjects', 'encyclopaedia', 'mynhssubmissions')
    ));
    
    if( $posts ): ?>
    <div class="acf-map">
    	<?php foreach( $posts as $post ): 
    		setup_postdata( $post );
    		$location = get_field('location_of_objects');
    		
    		// first, get the image object returned by ACF
    		$imageN_object = get_field('objects_image');
    		// and the image size you want to return
    		$imageN_size = 'thumbnail';
    		// now, we'll exctract the image URL from $image_object
    		$imageN_url = $imageN_object['sizes'][$imageN_size];
    		
    		// first, get the image object returned by ACF
    		$imageG_object = get_field('object_image');
    		// and the image size you want to return
    		$imageG_size = 'thumbnail';
    		// now, we'll exctract the image URL from $image_object
    		$imageG_url = $imageG_object['sizes'][$imageG_size];	
    	?>	
    	<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
    		<div class="row">
    			<div class="small-12 columns brightness">
    				<div class="small-12 columns text-center">
    					<h4 class="walter"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php echo get_field('the_title');?></a></h4>
    				</div>
    				<div class="medium-3 small-12 columns">
    					<?php 
    						if(isset($imageN_object) || isset($imageG_object)) { ?>
    							<a href="<?php the_permalink(); ?>"><img src="<?php echo $imageN_url; ?>" /></a>
    							<a href="<?php the_permalink(); ?>"><img src="<?php echo $imageG_url; ?>" /></a> <?php
    						} else { ?>
    							<p class="text-center" style="margin-top: 40px; font-style: italic;">Image Unavailable</p><?php
    						}
    					?>
    					
    				</div>
    				<div class="medium-9 small-12 columns">
    					<h5 class="address"><?php echo $location['address']; ?></h5>
    					<p>	<?php echo wp_trim_words(get_field('object_description') , $num_words = 30, $more = '...'); ?>
    						<?php echo wp_trim_words(get_field('the_story') , $num_words = 30, $more = '...'); ?>
    					
    					</p>
    				</div>
    			</div>
    		</div>
    	</div>
    	<?php endforeach; ?>
    </div>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>

    Can somebody point to me why am I getting this error? Haven’t got a clue why.

  • My mistake.
    I forgot to put a conditional statement to check if the $location is empty or not. So the working code is like this (if anybody is looking at multi marker application):

    <?php 
    $posts = get_posts(array(
    	'posts_per_page'	=> -1,
    	'post_type'			=> array('museumobjects', 'encyclopaedia', 'mynhssubmissions')
    ));
    
    if( $posts ): ?>
    <div class="acf-map">
    	<?php foreach( $posts as $post ): 
    		setup_postdata( $post );
    		$location = get_field('location_of_objects');
    		if(!empty($location)):
    		
    		// first, get the image object returned by ACF
    		$imageN_object = get_field('objects_image');
    		// and the image size you want to return
    		$imageN_size = 'thumbnail';
    		// now, we'll exctract the image URL from $image_object
    		$imageN_url = $imageN_object['sizes'][$imageN_size];
    		
    		// first, get the image object returned by ACF
    		$imageG_object = get_field('object_image');
    		// and the image size you want to return
    		$imageG_size = 'thumbnail';
    		// now, we'll exctract the image URL from $image_object
    		$imageG_url = $imageG_object['sizes'][$imageG_size];	
    	?>	
    	<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
    		<div class="row">
    			<div class="small-12 columns brightness">
    				<div class="small-12 columns text-center">
    					<h4 class="walter"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php echo get_field('the_title');?></a></h4>
    				</div>
    				<div class="medium-3 small-12 columns">
    					<?php 
    						if(isset($imageN_object) || isset($imageG_object)) { ?>
    							<a href="<?php the_permalink(); ?>"><img src="<?php echo $imageN_url; ?>" /></a>
    							<a href="<?php the_permalink(); ?>"><img src="<?php echo $imageG_url; ?>" /></a> <?php
    						} else { ?>
    							<p class="text-center" style="margin-top: 40px; font-style: italic;">Image Unavailable</p><?php
    						}
    					?>
    					
    				</div>
    				<div class="medium-9 small-12 columns">
    					<h5 class="address"><?php echo $location['address']; ?></h5>
    					<p>	<?php echo wp_trim_words(get_field('object_description') , $num_words = 30, $more = '...'); ?>
    						<?php echo wp_trim_words(get_field('the_story') , $num_words = 30, $more = '...'); ?>
    					
    					</p>
    				</div>
    			</div>
    		</div>
    	</div>
    		<?php endif; ?>
    	<?php endforeach; ?>
    </div>
    <?php wp_reset_postdata(); ?>
    <?php endif; ?>

    note the addition:
    if(!empty($location)):
    that’s crucial.

    cheers.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.