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.
