Integrating PHP into Javascript to display map markers with Google API -
i getting 1 map marker display not multiple markers.
however data displays in html log. think missing loop or did not use current loop correctly.
anyone clarify make day.
thank you.
herewith code:
<?php get_header(); ?> <!-- row main content area --> <div class="small-12 large-12 columns" id="content" role="main"> <h1 class="entry-title">find 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) { (var = 0; < 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 loop ?> <script src="https://maps.googleapis.com/maps/api/..." async defer></script> </div> <?php get_footer(); ?> this output script within 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 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 same result code:
<?php get_header(); ?> <!-- row main content area --> <div class="small-12 large-12 columns" id="content" role="main"> <h1 class="entry-title">find 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 loop ?> <script src="https://maps.googleapis.com/maps/api/..." async defer></script> </div> <?php get_footer(); ?> herewith link test page:
you initialising whole map object inside while loop again , again. want take out of loop , set markers in loop.
Comments
Post a Comment