Google Maps in WordPress

I am dealing with an issue that I would like to have some suggestions on how to solve it.
I have a self-hosted WordPress managed website where I implemented a Google Map to display on a page. On this map, I am listing posts based on terms from a custom post type. The listing in itself is working well displaying one marker for every post. However, when I try to display a different marker for each type of term, the list becomes faulty.
The issue occuring is that the posts with the initial term are listed with content, but the posts with the additional term is showing blank.

Where in the code am I messing things up? Please see the code below:

Page template:

<?php if ( $loop->have_posts() ) : ?>

                    <!--<div style="display: none;">-->

                        <?php $i = 1; ?>
                        <?php $b = 1; ?>

                        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

                            <?php  $terms = get_the_terms($loop->ID, 'observationcat'); ?>

                            <?php foreach( $terms as $term ) {?>

                                <?php if ((get_post_meta($loop->ID, '_location', true) !== '') && (($term->term_id) == 112)) : ?>

                                    <div id="itemFundet<?php echo $i; ?>">
                                        <a href="https://wordpress.stackexchange.com/questions/230930/<?php the_permalink(); ?>"><strong><?php the_title(); ?></strong></a>
                                        <?php echo'<p>Kategori ID: ' . $term->term_id . '</p>'; ?>
                                        <?php echo'<p>Kategori: ' . $term->name . '</p>'; ?>
                                        <?php the_excerpt(); ?>
                                        <?php echo '<p>Tabt udstyr nummer: ' . $i . '</p>'; ?>
                                        <?php echo get_post_meta($post->ID, '_location', true) ?>
                                    </div>

                                    <?php $i++; ?>

                                <?php elseif ((get_post_meta($loop->ID, '_location', true) !== '') && (($term->term_id) == 113)) : ?>

                                    <div id="itemTabt<?php echo $b; ?>">
                                        <a href="https://wordpress.stackexchange.com/questions/230930/<?php the_permalink(); ?>"><strong><?php the_title(); ?></strong></a>
                                        <?php echo'<p>Kategori ID: ' . $term->term_id . '</p>'; ?>
                                        <?php echo'<p>Kategori: ' . $term->name . '</p>'; ?>
                                        <?php the_excerpt(); ?>
                                        <?php echo '<p>Fundet udstyr nummer: ' . $b . '</p>'; ?>
                                        <?php echo get_post_meta($post->ID, '_location', true) ?>
                                    </div>

                                    <?php $b++; ?>                                      

                                <?php endif; ?>

                            <?php } ?>

                        <?php endwhile; ?>

Page template – javascript:

                        var locationsTabt = [

                            <?php $b = 1; ?>

                            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

                                <?php foreach( $terms as $term ) { ?>

                                    <?php if ((get_post_meta($loop->ID, '_location', true) !== '') && (($term->term_id) == 113)) : ?>
                                    {
                                        latlng:new google.maps.LatLng(<?php echo get_post_meta($post->ID, '_location', true) ?>), 
                                        info : document.getElementById('itemTabt<?php echo $b; ?>')
                                    },
                                    <?php endif; ?>

                                <?php } ?>

                            <?php $b++; ?>

                            <?php endwhile; ?>
                        ];

var locationsFundet = [

                            <?php $i = 1; ?>

                            <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

                                <?php foreach( $terms as $term ) { ?>

                                    <?php if ((get_post_meta($loop->ID, '_location', true) !== '') && (($term->term_id) == 112)) : ?>
                                    {
                                        latlng:new google.maps.LatLng(<?php echo get_post_meta($post->ID, '_location', true) ?>), 
                                        info : document.getElementById('itemFundet<?php echo $i; ?>')
                                    },
                                    <?php endif; ?>

                                <?php } ?>

                            <?php $i++; ?>

                            <?php endwhile; ?>
                        ];
                    </script>'

Map.js file:

var infowindow = new google.maps.InfoWindow;
var fundetMarkerImg = new google.maps.MarkerImage('/wp-content/themes/underwaterhunt/img/markers/marker_spot.png', new google.maps.Size(45, 50));
var tabtMarkerImg = new google.maps.MarkerImage('/wp-content/themes/underwaterhunt/img/markers/marker_sigt.png', new google.maps.Size(45, 50));

for (var i = 0; i < locationsFundet.length; i++) 
{  

    var markerFundet = new google.maps.Marker(
    {
        position: locationsFundet[i].latlng,
        icon: fundetMarkerImg,
        animation:google.maps.Animation.DROP,
        map: map
    });

    google.maps.event.addListener(markerFundet, 'click', (function(markerFundet, i) 
    {
        return function() 
        {
            infowindow.setContent(locationsFundet[i].info);
            infowindow.open(map, markerFundet);
        }
    })(markerFundet, i));
}

for (var b = 0; b < locationsTabt.length; b++) 
{  

    var markerTabt = new google.maps.Marker(
    {
        position: locationsTabt[b].latlng,
        icon: fundetMarkerImg,
        animation:google.maps.Animation.DROP,
        map: map
    });

    google.maps.event.addListener(markerTabt, 'click', (function(markerTabt, b) 
    {
        return function() 
        {
            infowindow.setContent(locationsTabt[b].info);
            infowindow.open(map, markerTabt);
        }
    })(markerTabt, b));
}

As far as I can see using Chromes DevTool, the array named locationsFundet does not get any values assigned.

Anybody got an idea of what could be the problem?

0

Leave a Comment