First post map are showing but next post map are not showing
Rezaul1300 opened this issue · 1 comments
Rezaul1300 commented
In my first post map are showing exactly but the next post map are not showing// please help me..waiting for your positive response.
thanks
my map coding in (index.php): -
<script>
<?php $maddr = get_post_meta(get_the_ID(),'event_map',true);?>
function initMap() {
var myLatLng = {lat: <?php echo $maddr['latitude']; ?>, lng: <?php echo $maddr['longitude']; ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: '<?php echo the_title();?>'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAh4eG0CZSzobg49GlkbM1Cvsammyz7hSg&callback=initMap">
</script>
cmb2 coding: -
$eventsfield -> add_field(array(
'name' => 'Event Location In Map',
'id' => 'event_map',
'type' => 'pw_map',
'split_values' => true,
));
mustardBees commented
Hi @Rezaul1300. I've included an example below where we output more than one map.
Meta box
/**
* Meta box to store event location.
*/
$event_location_meta_box = new_cmb2_box( array(
'id' => $prefix . 'event_location_meta_box',
'title' => 'Event Information',
'object_types' => array( 'event' ), // Post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Show field names on the left
) );
$event_location_meta_box->add_field( array(
'name' => 'Location',
'desc' => 'Drag the marker to set the exact location',
'id' => $prefix . 'event_location',
'type' => 'pw_map',
// 'split_values' => true, // Save latitude and longitude as two separate fields
) );
Template
<h1>Events</h1>
<?php
$args = array(
'post_type' => 'event',
'posts_per_page' => '-1',
'orderby' => 'menu_order',
'order' => 'ASC',
);
$events = new WP_Query( $args );
?>
<?php if ( $events->have_posts() ) : ?>
<ul>
<?php while ( $events->have_posts() ) : $events->the_post(); ?>
<?php $event_location = get_post_meta( get_the_ID(), '_cmb_event_location', true ); ?>
<li>
<h2><?php the_title(); ?></h2>
<div class="js-event-map event-map" data-latitude="<?php echo $event_location['latitude']; ?>" data-longitude="<?php echo $event_location['longitude']; ?>"></div>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
(function ($) {
$('.js-event-map').each(function (index, element) {
var position = new google.maps.LatLng($(element).data('latitude'), $(element).data('longitude'));
var myMapOptions = {
zoom : 15,
center: position
};
var map = new google.maps.Map($(element)[0], myMapOptions);
var marker = new google.maps.Marker({
position: position,
map : map
});
});
})(jQuery);
</script>
<style>
.event-map {
width: 400px;
height: 200px;
}
</style>