Page catalog

<?php
$storeData = [];
$args = array('post_type' => 'property');
$loop = new WP_Query($args);
foreach ( $loop->posts as $post ) {
    $location = get_field('location');
    $storeData[] = [
        'title' => apply_filters('the_title', $post->post_title),
        'lat'   => $location['lat'],
        'long'  => $location['lng']
    ];
}
wp_localize_script('jquery-core', 'storeData', $storeData);
wp_enqueue_script( 'jquery-core' );
?>
<?php 
/*
Template Name: Catalog
*/
get_header(); ?>
        <main id="main-content">
            <div class="search-object">
                <div class="container d-flex">
                    <div class="form d-flex justify-content-end">
                        <div class="wrapper">
                            <form>
                                <div class="selects row">
                                    <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Mājoklis</label>

                                            <select class="selectpicker">
                                                <option>Dzīvokļi</option>
                                                <option>Dzīvokļi 2</option>
                                                <option>Dzīvokļi 3</option>
                                                <option>Dzīvokļi 4</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Darījuma veids</label>

                                            <select class="selectpicker" title="">
                                                <option>Pārdod</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xl-2 col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Pilsēta</label>

                                            <select class="selectpicker">
                                                <option>Rīga</option>
                                                <option>Rīga</option>
                                                <option>Rīga</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Rajons</label>

                                            <select class="selectpicker">
                                                <option>Klusais centrs</option>
                                                <option>Klusais centrs</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="sliders row">
                                    <div class="slider col-sm-12">
                                        <div class="form-group">
                                            <label>Cena</label>

                                            <input type="text" id="price-slider" readonly>
                                            <div id="slider-price-range"></div>
                                        </div>
                                    </div>

                                    <div class="slider col-md-6">
                                        <div class="form-group">
                                            <label>Īpašuma platība</label>

                                            <input type="text" id="area-slider-1" readonly>
                                            <div id="slider-area-range-1"></div>
                                        </div>
                                    </div>

                                    <div class="slider col-md-6">
                                        <div class="form-group">
                                            <label>Īpašuma platība</label>

                                            <input type="text" id="area-slider-2" readonly>
                                            <div id="slider-area-range-2"></div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="found-objects">
                                <div class="sort-by d-flex justify-content-between">
                                    <span>Kārtot pēc:</span>

                                    <ul class="actions d-flex">
                                        <li class="active"><a href="#">Platības</a></li>
                                        <li><a href="#">Cenas</a></li>
                                    </ul>
                                </div>

                                <div class="owl-carousel">
                                    
                                     <?php
                                       $args = array(
                                         'post_type' => 'property',
                                         'posts_per_page' => -1
                                       );
                                       query_posts($args);
                                       while (have_posts()) : the_post();
                                       $i = $wp_query->current_post;
                                       echo ( 0 == $i % 6 ) ? '<div><div class="objects-list"><div class="container"><div class="row">' : '';
                                      ?>
                                        <div class="col-lg-6 search_item">
                                            <div class="object">
                                                <div class="thumb">
                                                    <a href="<?php the_permalink(); ?>">
                                                        <?php the_post_thumbnail('project_thumb', ['class' => 'project_thumb', 'title' => get_the_title()]);?>
                                                    </a>
                                                </div>

                                                <h3 class="object-location">
                                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                                </h3>

                                                <ul class="details d-flex justify-content-center">
                                                    <li><?php _e('Istabu skaits','easyhome');?>: <strong><?php the_field( 'rooms' ); ?></strong></li>
                                                    <?php
                                                    if( has_term( array('2'), 'property' ) ): ?>
                                                    <li><?php _e('Stāvi','easyhome');?>: <strong><?php the_field( 'floors' ); ?></strong></li>
                                                    <?php else: ?>
                                                    <li><?php _e('Stāvs','easyhome');?>: <strong><?php the_field( 'floors' ); ?></strong></li>
                                                    <?php endif; ?>
                                                    <li><?php _e('Platība','easyhome');?>: <strong><?php the_field( 'area' ); ?> m<sup>2</sup></strong></li>
                                                </ul>

                                                <div class="bottom d-flex justify-content-between align-items-center">
                                                    <?php 
                                                    $price = get_field('price');
                                                    $rentprice = get_field('rent_price');
                                                    $area = get_field('area');
                                                    $total = $price / $area;
                                                    $totalrent = $rentprice / $area;
                                                    ?>
                                                    <?php
                                                    if( has_term( array('7', '6'), 'tips' ) ): ?>
                                                    <div class="price">
                                                        <ul>
                                                            <li class="total"><?php echo number_format($price, 2); ?> EUR</li>

                                                            <li class="meter"><?php echo number_format($total, 2); ?> EUR / m²</li>
                                                        </ul>
                                                    </div>
                                                    <?php else: ?>
                                                    <div class="price">
                                                        <ul>
                                                            <li class="total"><?php echo number_format($rentprice, 2); ?> EUR <?php _e('mēnesī','easyhome');?></li>

                                                            <li class="meter"><?php echo number_format($totalrent, 2); ?> EUR / m²</li>
                                                        </ul>
                                                    </div>     
                                                    <?php endif; ?> 
                                                    

                                                    <a href="<?php the_permalink(); ?>" class="open-object"><?php _e('Atvērt','easyhome');?></a>
                                                </div>
                                            </div>
                                        </div>
                                    <?php
                                              echo ( $wp_query->post_count == $i || 5 == $i % 6 ) ? '</div></div></div></div>' : '';
                                          endwhile; 
                                      ?>
                                  </div></div></div></div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="map">
                        <div id="google-map"></div>

                        <script type="text/javascript">
                            
                            function initMap() {
                                var map = new google.maps.Map(document.getElementById('google-map'), {
                                  zoom: 11,
                                  center: {lat: 56.9715833, lng: 23.9890814},
                                  styles:[
                                      {
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#f5f5f5"
                                          }
                                        ]
                                      },
                                      {
                                        "elementType": "labels.icon",
                                        "stylers": [
                                          {
                                            "visibility": "off"
                                          }
                                        ]
                                      },
                                      {
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#616161"
                                          }
                                        ]
                                      },
                                      {
                                        "elementType": "labels.text.stroke",
                                        "stylers": [
                                          {
                                            "color": "#f5f5f5"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "administrative.land_parcel",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#bdbdbd"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "poi",
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#eeeeee"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "poi",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#757575"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "poi.park",
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#e5e5e5"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "poi.park",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#9e9e9e"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "road",
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#ffffff"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "road.arterial",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#757575"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "road.highway",
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#dadada"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "road.highway",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#616161"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "road.local",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#9e9e9e"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "transit.line",
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#e5e5e5"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "transit.station",
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#eeeeee"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "water",
                                        "elementType": "geometry",
                                        "stylers": [
                                          {
                                            "color": "#c9c9c9"
                                          }
                                        ]
                                      },
                                      {
                                        "featureType": "water",
                                        "elementType": "labels.text.fill",
                                        "stylers": [
                                          {
                                            "color": "#9e9e9e"
                                          }
                                        ]
                                      }
                                    ]
                                });

                                // Array of markers
                                
                                 // Array of markers
                                var markers = [
                                    {
                                        coords:{lat: 56.9715833, lng: 23.9890814},
                                        iconImage:'assets/img/map-marker.png',
                                        content:'<div class="marker-pop-object">'+
                                        '<div class="thumb">'+
                                        '<img src="assets/img/marker-pop-thumb.png">'+
                                        '<div class="bottom-info">'+
                                        '<div class="price d-flex align-items-center justify-content-between">'+
                                        '<ul>'+
                                        '<li class="total">256 381 EUR'+
                                        '</li>'+
                                        '<li class="meter">5 207 EUR / m²'+
                                        '</li>'+
                                        '</ul>'+
                                        '</div>'+
                                        '</div>'+
                                        '</div>'+
                                        '<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
                                        '<ul class="details d-flex justify-content-center flex-wrap">'+
                                        '<li>Istabu skaits: <strong>3</strong></li>'+
                                        '<li>Stāvs: <strong>7 / 8</strong></li>'+
                                        '<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
                                        '</ul>'+
                                        '</div>'
                                    },
                                    {
                                        coords:{lat:56.9600128, lng:24.0403903},
                                        iconImage:'assets/img/map-marker.png',
                                        content:'<div class="marker-pop-object">'+
                                        '<div class="thumb">'+
                                        '<img src="assets/img/marker-pop-thumb.png">'+
                                        '<div class="bottom-info">'+
                                        '<div class="price d-flex align-items-center justify-content-between">'+
                                        '<ul>'+
                                        '<li class="total">256 381 EUR'+
                                        '</li>'+
                                        '<li class="meter">5 207 EUR / m²'+
                                        '</li>'+
                                        '</ul>'+
                                        '</div>'+
                                        '</div>'+
                                        '</div>'+
                                        '<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
                                        '<ul class="details d-flex justify-content-center flex-wrap">'+
                                        '<li>Istabu skaits: <strong>3</strong></li>'+
                                        '<li>Stāvs: <strong>7 / 8</strong></li>'+
                                        '<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
                                        '</ul>'+
                                        '</div>'
                                    },
                                    {
                                        coords:{lat:56.9572007, lng:24.1064851},
                                        iconImage:'assets/img/map-marker.png',
                                        content:'<div class="marker-pop-object">'+
                                        '<div class="thumb">'+
                                        '<img src="assets/img/marker-pop-thumb.png">'+
                                        '<div class="bottom-info">'+
                                        '<div class="price d-flex align-items-center justify-content-between">'+
                                        '<ul>'+
                                        '<li class="total">256 381 EUR'+
                                        '</li>'+
                                        '<li class="meter">5 207 EUR / m²'+
                                        '</li>'+
                                        '</ul>'+
                                        '</div>'+
                                        '</div>'+
                                        '</div>'+
                                        '<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
                                        '<ul class="details d-flex justify-content-center flex-wrap">'+
                                        '<li>Istabu skaits: <strong>3</strong></li>'+
                                        '<li>Stāvs: <strong>7 / 8</strong></li>'+
                                        '<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
                                        '</ul>'+
                                        '</div>'
                                    },
                                    {
                                        coords:{lat:56.8934427, lng:24.1238537},
                                        iconImage:'assets/img/map-marker.png',
                                        content:'<div class="marker-pop-object">'+
                                        '<div class="thumb">'+
                                        '<img src="assets/img/marker-pop-thumb.png">'+
                                        '<div class="bottom-info">'+
                                        '<div class="price d-flex align-items-center justify-content-between">'+
                                        '<ul>'+
                                        '<li class="total">256 381 EUR'+
                                        '</li>'+
                                        '<li class="meter">5 207 EUR / m²'+
                                        '</li>'+
                                        '</ul>'+
                                        '</div>'+
                                        '</div>'+
                                        '</div>'+
                                        '<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
                                        '<ul class="details d-flex justify-content-center flex-wrap">'+
                                        '<li>Istabu skaits: <strong>3</strong></li>'+
                                        '<li>Stāvs: <strong>7 / 8</strong></li>'+
                                        '<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
                                        '</ul>'+
                                        '</div>'
                                    },
                                    {
                                        coords:{lat:56.9313837, lng:24.1232994},
                                        iconImage:'assets/img/map-marker.png',
                                        content:'<div class="marker-pop-object">'+
                                        '<div class="thumb">'+
                                        '<img src="assets/img/marker-pop-thumb.png">'+
                                        '<div class="bottom-info">'+
                                        '<div class="price d-flex align-items-center justify-content-between">'+
                                        '<ul>'+
                                        '<li class="total">256 381 EUR'+
                                        '</li>'+
                                        '<li class="meter">5 207 EUR / m²'+
                                        '</li>'+
                                        '</ul>'+
                                        '</div>'+
                                        '</div>'+
                                        '</div>'+
                                        '<h4 class="object-location">Elizabetes iela <span>Klusais centrs</span></h4>'+
                                        '<ul class="details d-flex justify-content-center flex-wrap">'+
                                        '<li>Istabu skaits: <strong>3</strong></li>'+
                                        '<li>Stāvs: <strong>7 / 8</strong></li>'+
                                        '<li>Platība: <strong>74 m<sup>2</sup></strong></li>'+
                                        '</ul>'+
                                        '</div>'
                                    }
                                ];

                               
                                // Loop through markers
                                for(var i = 0;i < markers.length;i++){
                                    // Add marker
                                    addMarker(markers[i]);
                                }

                                // Add Marker Function
                                function addMarker(props){
                                    var marker = new google.maps.Marker({
                                        position:props.coords,
                                        map:map,
                                    });

                                    // Check for customicon
                                    if(props.iconImage){
                                      // Set icon image
                                      marker.setIcon(props.iconImage);
                                    }

                                    // Check content
                                    if(props.content){
                                        var infoWindow = new google.maps.InfoWindow({
                                            content:props.content,
                                            maxWidth: 215
                                        });

                                        marker.addListener('click', function(){
                                            infoWindow.open(map, marker);
                                            $(this).closest('div').addClass('test');
                                        });
                                    }
                                }
                            }
                        </script>

                        <script async defer
                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1Jr1HTNuJabgm7KSBykcHUdQYj5ZdOJk&callback=initMap">
                        </script>
                    </div>
                </div>
            </div>
        </main>
<?php get_footer(); ?>