First post map are showing but next post map are not showing

[Himel Sarker]

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,
));

[Phil Wylie]

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>

Result