mlstart

<div class="container content-page">
		<div class="page-content">
			<div class="row">
				<div class="content col-md-12">
					<div id="customMap" class="YMaps" style="width:100%;height:400px;">
					</div>
					<?php if( have_rows('example_mebel') ): ?>
						<?php $yamap = [];?>
						<?php while( have_rows('example_mebel') ): the_row(); ?>
							<!-- baloon content -->
							<?php $example_title = get_sub_field('example_title') ?>
							<?php $example_address = get_sub_field('example_address') ?>
							<?php $example_phone = get_sub_field('example_phone') ?>
							<?php $example_time = get_sub_field('example_time') ?>
							<?php 

	$example_placemark_type = array
	("twirl#darkgreenStretchyIcon","twirl#greenStretchyIcon"); 

								// $example_placemark_type = array("twirl#redIcon", "twirl#darkblueIcon", "twirl#pinkIcon", "twirl#darkorangeIcon", "twirl#violetIcon"); 
							?>
							<!-- baloon content -->
							<?php $tempID = get_sub_field( 'example_id'); ?>
							<?php $cityName = get_sub_field( 'example_city'); ?>
							<?php if( have_rows('example_places') ): while( have_rows('example_places') ): the_row();  ?>
								<?php $example_longitude = get_sub_field( 'example_longitude'); ?>
								<?php $example_lattitude = get_sub_field( 'example_lattitude'); ?>
								
							
							<!---->

							<?php
								array_push
								(
									$yamap,
									[
										"lat" => $example_lattitude,
										"lon" => $example_longitude,
										"header" => $example_title,
										"address" => $example_address,
										"time" => $example_time,
										"footer" => $example_phone,
										"placemark" => $example_placemark_type[array_rand($example_placemark_type)],
										"id" => $tempID,
										"city" => $cityName
									]
								);

							?>
								<?php endwhile; endif; ?>
						<?php endwhile; ?>
					<?php endif; ?>
				</div>
				<div style="padding: 10px 0 !important; clear: both;"></div>
				<div class="content col-md-12">
					<?php if( have_rows('example_mebel') ): ?>
						<div class="example_accordion">
							<div class="panel-group" id="accordion">

						<?php while( have_rows('example_mebel') ): the_row(); ?>
							
							<!--example_places-->
								<!-- begin object -->
								
										<!-- ** -->
										<?php if ($example_title = get_sub_field('example_title')) { ?>
											<?php ($example_id = get_sub_field('example_id')); ?>
										

										 
											<div class="panel panel-default">
											  <div class="panel-heading">
												<h4 class="panel-title">
												  <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $example_id ?>"><?php echo $example_title ?><?php if ($example_city = get_sub_field('example_city')) { ?><span style="float:right;"><?php echo $example_city  ?></span><?php } ?></a>
												</h4>
											  </div>
											  <div id="<?php echo $example_id ?>" class="panel-collapse collapse">
												<div class="panel-body">
													<?php if ($example_address = get_sub_field('example_address')) { ?>
														<div class="faq_answer"><span class="fa fa-map-marker"><?php echo $example_address ?></span></div>
													<?php } ?>
													<?php if ($example_time = get_sub_field('example_time')) { ?>
														<div class="faq_answer"><span class="fa fa-clock-o"><?php echo $example_time ?></span></div>
													<?php } ?>
													<?php if ($example_phone = get_sub_field('example_phone')) { ?>
														<div class="faq_answer"><span class="fa fa-phone"><?php echo $example_phone ?></span></div>
													<?php } ?>
													<?php if ($example_mail = get_sub_field('example_mail')) { ?>
														<div class="faq_answer"><span class="fa fa-at"><?php echo $example_mail ?></span></div>
													<?php } ?>
													<div class="gallery">
														<?php $images = get_sub_field('example_gallery');
															if( $images ): ?>
																<ul>
																	<?php foreach( $images as $image ): ?>
																		<li>
																			<a href="<?php echo $image['url']; ?>">
																				 <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
																			</a>
																		</li>
																	<?php endforeach; ?>
																</ul>
														<?php endif; ?>
													</div>
												</div>
												<div class="panel-footer">
													
												</div>
											  </div>
											</div>
										  
										<?php } ?>
								
								<!-- end object -->
						<?php endwhile; ?>
							</div>
						</div>
					<?php endif; ?>
				</div>
			</div><!-- end row-fluid -->
		</div>
	</div><!-- end container -->
<?php echo "<script type=\"text/javascript\"> var points=".json_encode($yamap, true)."</script>" ?>;

var zoom = 16,
    // mapCenter = [55.709992,37.654287];
    // mapCenter = [points[0].lat, points[0].lon],
    referenceCity = ['Москва', 'Санкт-Петербург'],
    mapAlwaysReady = false;    
var customMap,
    mapCenter;
function showCurrentPlace(event)
{
    event.preventDefault();
    var currentSelectedItem = jQuery(this).find('a').attr('href').substr(1),
    currentSelectedPoint = 
        points.filter(function(item){return item.id == currentSelectedItem;})[0];
    if(mapAlwaysReady)
    {        
        customMap.setCenter([currentSelectedPoint.lat, currentSelectedPoint.lon]);
        customMap.setZoom(zoom);
    }    
    console.table(currentSelectedPoint);
}

function getMinMax(sourceArray, field)
{
    var maxPrice = Math.max.apply(Math, sourceArray.map(function(item){return item[field];})),
        minPrice = Math.min.apply(Math, sourceArray.map(function(item){return item[field];})) 
    return {max: maxPrice, min: minPrice};
}
function mapReady()
{   
    customMap = new ymaps.Map('customMap', 
    {
        center: mapCenter,
        zoom: zoom
    });

    points.forEach(function(item)
    {
        customMap.geoObjects.add
        (
            new ymaps.Placemark
            (
                [item.lat, item.lon], 
                {
                    iconContent: item.header, 
                    balloonContentHeader: item.header, 
                    balloonContentBody: 
                        item.address + 
                        '<br>' +
                        item.time
                        , 
                    balloonContentFooter: item.footer
                },
                {
                    preset: item.placemark //"twirl#pinkStretchyIcon"
                }
            )
        );    
    });
    mapAlwaysReady = true;    
    var tempBounds = points.reduce
    (
        function(prev, cur)
        {       
            // return referenceCity.filter(function(itemCity)
            // {
            //     return itemCity == cur.city;
            // }).length > 0 ? prev.concat({lat: cur.lat, lon: cur.lon}) : prev; 
            return prev.concat({lat: cur.lat, lon: cur.lon});
        }, 
        []
    ),
    referenceBounds = 
    {
        lats: getMinMax(tempBounds, 'lat'),
        longs: getMinMax(tempBounds, 'lon'),
    };
    customMap.setBounds
    (
        [
            [referenceBounds.lats.min, referenceBounds.longs.min], 
            [referenceBounds.lats.max, referenceBounds.longs.max]
        ]
    );
}