Integrating PHP into Javascript to display map markers with Google API

Question

I am getting one map marker to display but not multiple markers.

However the data displays in the HTML log. I think I am missing a loop or did not use my current loop correctly.

Anyone who could clarify would make my day.

Thank you.

Herewith the code:

<?php get_header(); ?>

<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">

    <h1 class="entry-title">Find a store</h1>

    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
    </script>

    <div id="map"></div>

    <?php
    $args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
        ?>

        <?php $lat = types_render_field("lat", array("output" => "raw")); ?>
        <?php $long = types_render_field("long", array("output" => "raw")); ?>

        <script type="text/javascript">
            var lat = <?php echo $lat; ?>;
            var long = <?php echo $long; ?>;
            var locations = [
                ['<?php the_title(); ?>', lat, long]
            ];

            function setMarkers(map) {
                for (var i = 0; i < locations.length; i++) {
                    var location = locations[i];
                    var marker = new google.maps.Marker({
                        position: {lat: location[1], lng: location[2]},
                        map: map,
                        title: location[0],
                    });
                }
            }
        </script>
    <?php endwhile; // End the loop ?>

    <script src="https://maps.googleapis.com/maps/api/..." async defer></script>

</div>

<?php get_footer(); ?>

This is the output script within the console log:

<script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
</script>

<div id="map"></div>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -25.746111, lng: 28.188056}),
            map: map,
            title: 'Willow Way Spar'
        });
    }
</script>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -29.919885, lng: 30.941782}),
            map: map,
            title: 'Yellowwood park Superspar'
        });
    }
</script>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -26.8598225, lng: 26.6317514}),
            map: map,
            title: 'Zest for Health'
        });
    }
</script>

<script type="text/javascript">
    function setMarkers(map) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: -25.8299422, lng: 28.2819103}),
            map: map,
            title: 'Zest Wellness Centre'
        });
    }
</script>


<script src="https://maps.googleapis.com/maps/api/..." async defer></script>

</div>

...and I get the same result with this code:

<?php get_header(); ?>
<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">

    <h1 class="entry-title">Find a store</h1>

    <script type="text/javascript">
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -28.5758488, lng: 25.1128267},
                zoom: 5
            });
            setMarkers(map);
        }
        ;
    </script>

    <div id="map"></div>

    <?php
    $args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
        ?>

        <?php $lat = types_render_field("lat", array("output" => "raw")); ?>
        <?php $long = types_render_field("long", array("output" => "raw")); ?>

        <script type="text/javascript">
            var lat = <?php echo $lat; ?>;
            var long = <?php echo $long; ?>;
        </script>

        <script>
            function setMarkers(map) {
                var marker = new google.maps.Marker({
                    position: {lat: lat, lng: long},
                    map: map,
                    title: '<?php the_title(); ?>',
                });
            }
        </script>

        <?php wp_reset_postdata(); ?>
    <?php endwhile; // End the loop ?>

    <script src="https://maps.googleapis.com/maps/api/..." async defer></script>

</div>

<?php get_footer(); ?>

Herewith a link to the test page:

http://www.golonutrition.co.za/find-a-store/

Would you be able to help on this please? @geocodezip

Ruan Petersen
– Ruan Petersen

2016-04-25 07:01:52 +00:00
Commented Apr 25, 2016 at 7:01 — Ruan Petersen
– Ruan Petersen, Commented Apr 25, 2016 at 7:01

Antony D'Andrea · Accepted Answer · 2016-04-19 07:11:08Z

1

You are initialising the whole map object inside the while loop again and again. You want to take that out of the loop and only set the markers in the loop.

answered Apr 19, 2016 at 7:11

Antony D'Andrea

1,0142 gold badges18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ruan Petersen Over a year ago

Cool, I've done that but still one map marker. I switched the position of the other chunks of variables too but it seems that they have to stay in the loop. Maybe a second loop for this bit of code: <script type="text/javascript"> var beaches = [ ['<?php the_title(); ?>', lat, long] ]; </script>

Antony D'Andrea Over a year ago

You need to reorganise the logic. You are essentially redeclaring your variables over and over again in a loop. If you look at the page source this is generating you will see the Javascript repeated down the page.

Ruan Petersen Over a year ago

The thing that confuses me is that the javascript function displays the first set of data generated by the php loop request but then stops at that result.

Ruan Petersen Over a year ago

I did notice that it generated in the HTML but just can't fathom the absence of displaying this data.

user5567848 · Accepted Answer · 2016-04-19 07:14:55Z

0

to avoid this kind of prob I think it is better to recover the result by an ajax Requette and use the lat and long variables directly javascript

answered Apr 19, 2016 at 7:14

user5567848

1 Comment

Ruan Petersen Over a year ago

I might be wrong but I think that an Ajax request would complicate matters as I am already requesting the data through PHP and have managed to display the first result so I am looking for a way to fix the loop.

Ruan Petersen · Accepted Answer · 2016-04-28 12:21:01Z

This is the answer. A big thank you to @Dan.

<?php
$storeData = [];
$args = ['post_type' => 'store'];
$loop = new WP_Query($args);
foreach ($loop->posts as $post) {
$storeData[] = [
    'title' => apply_filters('the_title', $post->post_title),
    'lat' => types_render_field('lat', ['output' => 'raw']),
    'long' => types_render_field('long', ['output' => 'raw']),
];
}    
wp_localize_script('jquery-core', 'storeData', $storeData);?>

<?php get_header(); ?>

<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">

<h1 class="entry-title">Find a store</h1>

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/..." async defer></script>

<script type="text/javascript">
        function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(-27.2758488, 26.1128267),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    var j = storeData.length;
        for (i = 0; i < j; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(storeData[i].lat, storeData[i].long),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(storeData[i].title);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    };
</script>

Collectives™ on Stack Overflow

Integrating PHP into Javascript to display map markers with Google API

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related