Trouble with Google Map

• apitlekays

• January 20, 2016 at 9:56 pm

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.

• apitlekays

• January 22, 2016 at 10:20 am

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.