logo
02.10.2018 17:26
1
Ahoj , mám šablonu na google mapu a chci jí na jednom místě v šabloně od určité velikosti nezobrazit a pak ji zobrazit na jiné pozici, než tak jak dovoluje layout.

Tak jsem to nastavil, aby zmizela od 991px z té první pozice přes display:none, a pak přes display , block jsem dal zobrazit tu šablonu na iné pozici..., ale zase , už dané v šabloně, jsou tam vlastně v ten moment dvě stejné, i když se dá displej none, dá se to nějak vypnout nebo je nutné udělat novou šablonu s mapou a všemu přiřadit jiné třídy ?

A prostě to úplně rozhodí tu stránku.... jen přřidání té šablony s mapou.

Za šablonou s google mapou je <?php wp_reset_postdata();?>

Kód:
                        for (i = 0; i < locations.length; i++) {

                            jQuery('#map img[src="'+image[i]+'"]').attr('style', '3px solid black !important');

                            var flatNumber = parseInt(locations[i][3]);
                            var color = '';

                            if(flatNumber > 0) {
                                color = 'green';
                                var border = 'border-green';
                            } else {
                                color = 'red';
                                var border = 'border-red';
                            }

                            var marker = new MarkerWithLabel({
                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                map: map,
                                shape:{
                                    coords:[34,34,34],
                                    type:'circle'
                                },
                                icon:{
                                    url:image[i],
                                    scaledSize: new google.maps.Size(55, 55), // scaled size
                                    size:new google.maps.Size(60,60),
                                    origin: new google.maps.Point(0,0),
                                    // anchor: new google.maps.Point(30,49)
                                },
                                optimized:false,
                                labelContent: flatNumber.toString(),
                                labelAnchor: new google.maps.Point(-7, 62),
                                labelClass: color,
                                labelInBackground: false,
                                zIndex: (Math.round(latLng.lat()*-100000)<<5)-1,
                                url: locations2[i]
                            });

                            if(border.toString() === 'border-red') {
                                google.maps.event.addListener(marker,'mouseover',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]:not(.big-image)').addClass('border-red');
                                });
                            } else {
                                google.maps.event.addListener(marker,'mouseover',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]:not(.big-image)').addClass('border-green');
                                });
                            }

                            if(border.toString() === 'border-red') {
                                google.maps.event.addListener(marker,'mouseout',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]').removeClass('border-red');
                                });
                            } else {
                                google.maps.event.addListener(marker,'mouseout',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]').removeClass('border-green');
                                });
                            }

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                              return function() {
                                  window.location.href = this.url;
                       //             infowindow.setContent(locations[i][0]);
                       //             infowindow.open(map, marker);
                               }
                           })(marker, i));

                        }
                    }

                    function init() {
                        var file="http://domia.tode.cz/wp-content/themes/understrap/js/index.js";
                        var script = document.createElement("script");
                        script.type = "text/javascript";
                        script.src = file;
                        script.onload = function(){
                            initMap()
                        };
                        document.body.appendChild(script);

                    }
                </script>
                <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=<?php echo $api_key;?>&libraries=places&callback=init"></script>
			<?php }; ?>

    <?php wp_reset_postdata();?>



Dělá to, když tam mám dvě šablony mapy do jedné šablony..přikládám celou mapu:

Kód:



<style>
    .green {
font-size: 18px;
font-weight: bold;
border: 1px solid #5ecd0d;
font-family: "Hind", sans-serif;
background-color: #5ecd0d;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
color: white;
box-shadow: 0 0 3px rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 3px rgba(255,255,255,0.8);
-webkit-box-shadow: 0 0 3px rgba(255,255,255,0.8);
-o-box-shadow: 0 0 3px rgba(255,255,255,0.8);
line-height: 1.5;
width: 25px;
height: 25px;
text-align: center;
padding-right: 2px;
    }
    .red {
font-size: 18px;
font-weight: bold;
border: 1px solid #c71d00;
font-family: "Hind", sans-serif;
background-color: #c71d00;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
color: white;
box-shadow: 0 0 3px rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 3px rgba(255,255,255,0.8);
-webkit-box-shadow: 0 0 3px rgba(255,255,255,0.8);
-o-box-shadow: 0 0 3px rgba(255,255,255,0.8);
line-height: 1.5;
width: 25px;
height: 25px;
text-align: center;
padding-right: 0px;
    }
    div#map .border-red {
        border:3px solid #c71d00 !important;
    }
    div#map .border-green {
        border:3px solid #5ecd0d !important;
    }

    .content-map {
        width:450px;
    }
    .content-map h3 {
        margin-top:10px;
    }
    .content-map p {
        margin-top:10px;
        padding-left:162px !important;
    }
    img.big-image {
        width: 150px !important;
        height: 150px !important;
        border: none !important;
        border-radius: 0 !important;
        float: left;
        margin-right:20px !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
    .more-link {
        float:right;
        text-decoration:underline;
    }
    .white {
        border:3px solid white !important;
    }
</style>



			<?php
			function getNemovitosti(){
				$ret = array();
				$args = array(
					'post_type' => 'nase_nemovitosti',
					'posts_per_page' => -1
				);
				$vypisnemovitosti = new WP_Query($args);
				if($vypisnemovitosti->have_posts()):
					while($vypisnemovitosti->have_posts()) : $vypisnemovitosti->the_post();
				        $ret['title'] = get_the_title();
				        $ret['link'] = get_permalink();
						$ret['text'] = get_field('text-byty');
						$ret['adresa'] = get_field('adresa_nemovitosti');
						$ret['mesto'] = get_field('mesto_nemovitosti');
						$return[] = $ret;
					endwhile;
				endif;
//
				return $return;
			};

			function marker(){
				$ret = array();
				$args = array(
					'post_type' => 'nase_nemovitosti',
					'posts_per_page' => -1
				);
				$image_a = new WP_Query($args);
				if($image_a->have_posts()):
					while($image_a->have_posts()) : $image_a->the_post();

						$image_1 = get_field('obrazek_pro_mapu');
						$ret[] = $image_1;
					endwhile;
				endif;

				return $ret;
			}; ?>
        
		
      


       
    

      
      <?php  $postid = get_the_ID();
      
			$markers = marker();
			$api_key = get_field('api_google_map', 'option');
      $location =  get_field('mapa_nemovitosti', $postid);
	
      
      
      
			$zoom = get_field('zoom_mapy', 'option');
			if ( $api_key && $location['lat'] && $location['lng'] ) {
				?>
                <style>
                    div#map {width: 100%; height: 320px;}

                    <?php for( $i = 0; $i < count( $markers ); $i++ ) {
					  echo '.mapa img[src="' . $markers[$i] . '"]';
					  if ( ( $i + 1 ) < count( $markers ) ) {
						echo ',' . PHP_EOL;
					  }
					}?> {
                        -webkit-border-radius: 99px;
                        -moz-border-radius: 99px;
                        width: 200px;
                        top: 5px;left:5px;
                        height:50px;
                        /*background:#fff;*/
                        /*padding:5px !important;*/
                        margin:1px !important;
                        border: 3px solid #fff !important;
                        border-radius: 99px;
                        box-shadow: 0 0 1px #3c3c3c;

                        /*-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);*/
                        /*-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);*/
                        /*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);*/
                    }

                </style>
                <div class="mapa1">
                <div class="map" id="map"></div>
                 </div>
			<?php
			function getFlatNumbers(){
				$ret = array();
				$args = array(
					'post_type' => 'nase_nemovitosti',
					'posts_per_page' => -1
				);
				$locations = new WP_Query($args);
				if($locations->have_posts()):
					while($locations->have_posts()) : $locations->the_post();
						$loc = get_field('pocet_prostor_nemovitosti');
						$ret[] = array( $loc['lat'], $loc['lng']);
					endwhile;
				endif;
				return $ret;
			};

			function yourplace(){
				$ret = array();
				$args = array(
					'post_type' => 'nase_nemovitosti',
					'posts_per_page' => -1
				);
				$locations = new WP_Query($args);
				if($locations->have_posts()):
					while($locations->have_posts()) : $locations->the_post();
						$loc = get_field('mapa_nemovitosti');
						$ret[] = array( $loc['lat'], $loc['lng']);
					endwhile;
				endif;
				return $ret;
			};


			$yourplaces = yourplace();
//			var_dump($yourplaces);exit;
			$flats = getFlatNumbers();
			$nemovitosti = getNemovitosti();
			//print_r($nemovitosti);exit;
			?>
                <script>   
                    function initMap() {                       

                        var latLng = new google.maps.LatLng(<?php echo $location['lat']; ?>,<?php echo $location['lng']; ?>);
                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: <?php echo $zoom; ?>,
                            center: latLng,
                            scrollwheel: false,
                            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"
                                }]
                            }]
                        });
                        var image = ['<?php echo implode( "', '", $markers ) ?>'];
                        var infowindow = new google.maps.InfoWindow();
                        var marker, i;

                        var locations = [
							<?php for ( $i = 0; $i < count( $yourplaces ); $i++ ) { ?>

                            ['<div class="content-map"><h3><?php echo $nemovitosti[$i]['title']; ?></h3><img class="big-image" src="<?php echo $markers[$i];?>"><p><?php echo $nemovitosti[$i]['text'];?></p><a href="<?php echo $nemovitosti[$i]['link'];?>" class="more-link">čtěte více</a></div>',
                                <?php echo $yourplaces[$i][0];?>,
                                <?php echo $yourplaces[$i][1];?>,
                                <?php echo $flats[$i][0];?>],
                        <?php } ?>
                        ];
                        
                        var locations2 = [
							<?php for ( $i = 0; $i < count( $yourplaces ); $i++ ) { ?>

                            ['<?php echo $nemovitosti[$i]['link'];?>'],
                                
                                
                        <?php } ?> ];      
                        

                        for (i = 0; i < locations.length; i++) {

                            jQuery('#map img[src="'+image[i]+'"]').attr('style', '3px solid black !important');

                            var flatNumber = parseInt(locations[i][3]);
                            var color = '';

                            if(flatNumber > 0) {
                                color = 'green';
                                var border = 'border-green';
                            } else {
                                color = 'red';
                                var border = 'border-red';
                            }

                            var marker = new MarkerWithLabel({
                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                map: map,
                                shape:{
                                    coords:[34,34,34],
                                    type:'circle'
                                },
                                icon:{
                                    url:image[i],
                                    scaledSize: new google.maps.Size(55, 55), // scaled size
                                    size:new google.maps.Size(60,60),
                                    origin: new google.maps.Point(0,0),
                                    // anchor: new google.maps.Point(30,49)
                                },
                                optimized:false,
                                labelContent: flatNumber.toString(),
                                labelAnchor: new google.maps.Point(-7, 62),
                                labelClass: color,
                                labelInBackground: false,
                                zIndex: (Math.round(latLng.lat()*-100000)<<5)-1,
                                url: locations2[i]
                            });

                            if(border.toString() === 'border-red') {
                                google.maps.event.addListener(marker,'mouseover',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]:not(.big-image)').addClass('border-red');
                                });
                            } else {
                                google.maps.event.addListener(marker,'mouseover',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]:not(.big-image)').addClass('border-green');
                                });
                            }

                            if(border.toString() === 'border-red') {
                                google.maps.event.addListener(marker,'mouseout',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]').removeClass('border-red');
                                });
                            } else {
                                google.maps.event.addListener(marker,'mouseout',function(){
                                    jQuery('#map img[src="'+this.icon.url+'"]').removeClass('border-green');
                                });
                            }

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                              return function() {
                                  window.location.href = this.url;
                       //             infowindow.setContent(locations[i][0]);
                       //             infowindow.open(map, marker);
                               }
                           })(marker, i));

                        }
                    }

                    function init() {
                        var file="http://domia.tode.cz/wp-content/themes/understrap/js/index.js";
                        var script = document.createElement("script");
                        script.type = "text/javascript";
                        script.src = file;
                        script.onload = function(){
                            initMap()
                        };
                        document.body.appendChild(script);

                    }
                </script>
                <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&key=<?php echo $api_key;?>&libraries=places&callback=init"></script>
			<?php }; ?>

    <?php wp_reset_postdata();?>
A tohle je ta šablona kam vkládám dvě stejné mapy, teď už vkládám dvě stejné, ale dva soubory..takže jiné..něco je třeba asi změnit.... a ta druhá, ale se stejným obsahem jaký jsem sdílel výše. A jmenuje se google-mapa-mobil.

Kód:
<?php
/**
 * Template Name: Byty a obchodní prostory detail
 *
 * 
 *
 */

?>
<?php $post_type_array = array( !'nase_nemovitosti', 'pronajem_bytu', 'pronajem_obchodu'); ?>

    
<?php if ( in_array(get_post_type(), $post_type_array) ): ?> 

  

<?php  $count_posts = wp_count_posts( 'pronajem_bytu' )->publish; ?>  

 
 
 
 <div class="row">
 <div class="col-12">
<p class="pocet-bytu"> <b><?php echo $count_posts; ?> nabídek </b>bytů k pronájmu v <b>Berouně</b> a <b>Hořovicích</b></p>
  
 
 
 
 
 
 </div>
 </div>
 
  <div class="row">
 <div class="col-12 col-lg-6">
 
 <div class="product-card__image-byty">
 <div class="img-container border-foto">     
 <img src="<?php the_field('obrazek-byty'); ?>" />    
 </div>
 <div class="priznak-byty-velke" style="background-color:<?php the_field('barva_priznaku_byty'); ?> ;"><?php the_field('priznak_byty'); ?> </div>
 </div>

 
 

 <div class="display-none-991">


 <div class="standart">
 <h2 class="nadpis-cerveny m-0">STANDARD BYTŮ DOMIA</h2>
 <p >Prohlédněte si naší nabídku nově zrekonstruovaných bytů k pronájmu. Každá jednotka prošla důkladnou rekonstrukcí a je částečně zařízena. </p>
 </div>
 
 
 
 <div class="mt-2">
 <?php $images = get_field('galerie-byty'); ?>

<?php if($images):

$photocount = 0;

?>
<div class="popup-gallery">

<?php foreach( $images as $image ): ?>



<a href="<?php echo $image['url']; ?>"
class="lightbox-link"
title="<?php echo $image['caption']; ?>"
data-description="<?php echo $image['description']; ?>">


<?php

$photocount++;

if($photocount <= 8) { ?>
<?php



?>

<div class="image-wrap">
<img src="<?php echo $image['url']; ?>" />
<div class="overlay-galerie <?php if($photocount==8) {echo 'visible';}?>">
<div class="text"><?php if($photocount==8) {echo '<span class="count">'."+".count($images).'</span>';} else { ?><img class="img-fluid svg" id="vrstva15" width="35px" height="30px" src="/wp-content/themes/understrap/img/svg/zoom.svg" /><?php } ?></div>
</div>


</div>


<?php
};

?>

</a>



<?php endforeach; ?>


</div>

<?php endif; ?> 


 </div>



   
 
 <div class="standart-nemovitosti">
 <h2 class="nadpis-cerveny m-0">Naše nemovitosti</h2>
 <p>Pronajměte si byt nebo obchodní prostor v atraktivní lokalitě přímo od majitele, bez provize realitní kanceláři. </p>
 
 </div>
 
 
 


 <div class="mt-2 mapa">
 
 

 <?php get_template_part("template/google-mapa-mala"); ?>  




















 </div>
 


 
 

    
 </div>  
 </div>   

 <div class="col-12 col-lg-6">
 <p class="hlavni-popisek"><?php the_field('text-byty'); ?></p>
 <h2 class="nadpis-cerveny">Základní informace:</h2>
 <div class="byty-tabulka">
 <div class="product-detail__table-item">
 <div class="row ">
 
 <div class="col-6">
  <div class="jmeno">
  <i class="svg-dispozice">  
    
  
  
  </i>
   
  Dispozice  
  </div>
  </div>
  <div class="col-6">
 <div class="dispozice-byty"><?php the_field('dispozice-byty'); ?> 
 
<a class="tooltip-odkaz" data-toggle="tooltip" title="<?php the_field('dispozice_tooltip'); ?>">
<img class="img-fluid svg" id="vrstva7" width="18px" height="17px" src="/wp-content/themes/understrap/img/svg/otazka.svg" />

</a>

 
 
 </div>
  </div>
   </div>
   </div>
     <div class="product-detail__table-item">
   <div class="row">
  <div class="col-6">
  <div class="jmeno">
  <i class="svg-plocha">  
    
  
  
  </i>
   
  Podlahová plocha (metráž):  
  </div>
  </div>
   <div class="col-6">
   
   <div class="plocha-byty"> <?php the_field('podlahova_plocha_byty'); ?> m² </div>
  </div>
 </div>
   </div>
  <div class="product-detail__table-item">
 <div class="row">
  <div class="col-6">
    <div class="jmeno">
  <i class="svg-adresa">  
    
  
  
  </i>
   
  Adresa:
  </div>
  </div>
   <div class="col-6">
 <div class="adresa-byty"> <?php the_field('ulice-byty'); ?>, <?php the_field('mesto-byty'); ?> </div>
  </div>
 </div> 
  </div>
  <div class="product-detail__table-item"> 
 <div class="row">
  <div class="col-6">
  <div class="jmeno">
  <i class="svg-nastehovani">  
    
  
  
  </i>
   
  K nastěhování:
  </div>
  </div>
   <div class="col-6">
<div class="priznak-byty-block" style="background-color:<?php the_field('barva_priznaku_byty'); ?> ;"><?php the_field('priznak_byty'); ?> </div>
  </div>
   </div>
 </div>
 </div>


<div class="mt-4"> 
<h2 class="nadpis-cerveny">Vybavení:</h2>
 
<?php if(get_field('byty_vybaveni')): ?>

	 

	<?php while(has_sub_field('byty_vybaveni')): ?>

		<div class="badge stitek"><img class="img-fluid svg" id="vrstva8" width="18px" height="17px" src="/wp-content/themes/understrap/img/svg/check.svg" /><?php the_sub_field('vybaveni_text'); ?></div>

	<?php endwhile; ?>

	

<?php endif; ?> 
 
 
 
 
</div> 
 
 
<div class="d-flex flex-row mt-4 mb-3">
<div class="najem-byty"> 
<h2 class="nadpis-cerveny">Měsíční nájem:</h2> 
<h3 class="cena-byty"> <?php the_field('mesicni_najem_byty'); ?>  Kč</h3> 
</div> 
<div class="najem-byty stred-border"> 
<div class="d-flex"><h2 class="nadpis-cerveny">Energie:</h2><a class="tooltip-flex" data-toggle="tooltip" title="<?php the_field('energie_tooltip'); ?>">
<img class="img-fluid svg" id="vrstva7" width="18px" height="17px" src="/wp-content/themes/understrap/img/svg/otazka.svg" /></a>  </div>


<h3 class="cena-byty"> <?php the_field('energie_byty'); ?> Kč </h3> 
</div> 

<div class="najem-byty"> 
<div class="d-flex"><h2 class="nadpis-cerveny">Kauce:</h2><a class="tooltip-flex" data-toggle="tooltip" title="<?php the_field('kauce_tooltip'); ?>">
<img class="img-fluid svg" id="vrstva7" width="18px" height="17px" src="/wp-content/themes/understrap/img/svg/otazka.svg" /> </a> </div>
<h3 class="cena-byty"> <?php the_field('kauce_byty'); ?>  Kč </h3> 
</div>  
 
 </div>
<div class="row mb-3">
<div class="col-12">
<p>Při uzavření nájemní smlouvy hradíte jednorázový <b>správní poplatek ve výši 3000 Kč.</b></p>



</div>
</div> 
<div class="row"> 
<div class="col-12 col-lg-12"> 
<a href="tel:<?php the_field('telefon', 'option'); ?>" class="btn btn-lg mb-2 mr-1 tlacitko-telefon tlacitko">
	<i class="icon icon-hands"><img class="img-fluid svg" id="vrstva9" width="17px" height="22px" src="/wp-content/themes/understrap/img/svg/telefon_do_tlacitka.svg" /></i>
	<?php the_field('telefon', 'option'); ?>
	</a>

 <button type="button" class="btn btn-lg mb-2 mr-1 tlacitko modal-tlacitko">
    <img class="img-fluid svg" id="Vrstva_5" width="38px" height="20px" src="/wp-content/themes/understrap/img/svg/rezervovat_byt.svg" />
     
     Rezervovat byt
    </button> 
 

 <button  type="button" class="btn btn-lg mb-2 tlacitko modal-doporucit">
    <img class="img-fluid svg" id="vrstva10" width="38px" height="20px" src="/wp-content/themes/understrap/img/svg/odeslat2.svg" />
     
     Doporučit <span class="odebrat-slovo" >známému</span>
    </button> 
 
</div>
 </div>
 



<button class="btn btn-lg mb-2 mr-1 tlacitko-sede" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus"  tabindex="0">
<i class="icon icon-hands"><img class="img-fluid svg" id="vrstva11" width="17px" height="22px" src="/wp-content/themes/understrap/img/svg/sdilet.svg" /></i>Sdílet</button>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-body">

<ul>
<li class="facebook-pop"><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>"  class=" mb-2 mr-1 fb-share fb-xfbml-parse-ignore">Facebook</a></li>
<li class="twitter-pop"><a href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink();?>"  class=" mb-2 mr-1 fb-share">Twitter</a></li>
</ul>


    
    
</div>
</div>



    
    
    
    
    
    
    
 <button  type="button" class="btn btn-lg mb-2 tlacitko-sede modal-uvolni">
   <img class="img-fluid svg" id="vrstva12" width="17px" height="22px" src="/wp-content/themes/understrap/img/svg/upozorneni.svg" />
     
    Upozornit, jakmile se byt uvolní
    </button>    

<a href="<?php the_field('aplikace', 'option'); ?>" target="_blank" class="btn btn-lg mb-2 mr-1 fb-share tlacitko-sede fb-xfbml-parse-ignore">
	<i class="icon icon-hands"><img class="img-fluid svg" id="vrstva13" width="17px" height="22px" src="/wp-content/themes/understrap/img/svg/aplikace-seda.svg" /></i>
	Stáhnout aplikaci
	</a> 

<a href="<?php the_field('facebook', 'option'); ?>" target="_blank" class="btn btn-lg mb-2 mr-1 fb-share tlacitko-sede fb-xfbml-parse-ignore">
	<i class="icon icon-hands"><img class="img-fluid svg" id="vrstva14" width="17px" height="22px" src="/wp-content/themes/understrap/img/svg/facebook-seda.svg" /></i>
	Sledujte nás
	
 <div class="fb-like" data-href="<?php the_field('facebook', 'option'); ?>" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>   
    </a>  


 

 <div class="mt-4 editor-byty">
 <?php the_field('editor-byty'); ?>
 
 </div>
 
  <div class="display-block-991">


 <div class="standart">
 <h2 class="nadpis-cerveny m-0">STANDARD BYTŮ DOMIA</h2>
 <p >Prohlédněte si naší nabídku nově zrekonstruovaných bytů k pronájmu. Každá jednotka prošla důkladnou rekonstrukcí a je částečně zařízena. </p>
 </div>
 
 
 
 <div class="mt-2">
 <?php $images1 = get_field('galerie-byty'); ?>

<?php if($images1):

$photocount1= 0;

?>
<div class="popup-gallery">

<?php foreach( $images1 as $image1 ): ?>



<a href="<?php echo $image1['url']; ?>"
class="lightbox-link"
title="<?php echo $image1['caption']; ?>"
data-description="<?php echo $image1['description']; ?>">


<?php

$photocount1++;

if($photocount1 <= 8) { ?>
<?php



?>

<div class="image-wrap">
<img src="<?php echo $image1['url']; ?>" />
<div class="overlay-galerie <?php if($photocount1==8) {echo 'visible';}?>">
<div class="text"><?php if($photocount1==8) {echo '<span class="count">'."+".count($images1).'</span>';} else { ?><img class="img-fluid svg" id="vrstva15" width="35px" height="30px" src="/wp-content/themes/understrap/img/svg/zoom.svg" /><?php } ?></div>
</div>


</div>


<?php
};

?>

</a>



<?php endforeach; ?>


</div>

<?php endif; ?> 


 </div>



   
 
 <div class="standart-nemovitosti">
 <h2 class="nadpis-cerveny m-0">Naše nemovitosti</h2>
 <p>Pronajměte si byt nebo obchodní prostor v atraktivní lokalitě přímo od majitele, bez provize realitní kanceláři. </p>
 
 </div>
 
 
 


 <div class="mt-2 mapa">
 
 
 <?php get_template_part("template/google-mapa-mobil"); ?>   





















 </div>
 


 
 

    
 </div>  
 
 
 
 
 
  </div>
  
   </div> 
  
  
  
  
  
  
<?php  if ( 'pronajem_bytu' == get_post_type() ) : ?>
<div class="row mt-5 mb-2">
<div class="col-12">
<h2 class="nadpis-cerny">Podobné nabídky </h2>

</div>
</div>
<div class="row ">
                 <?php 
$args = array(
  'posts_per_page' => 4,
	'post_type'		=> 'pronajem_bytu',
  'meta_key'			=> 'priznak_byty',
	'orderby'			=> 'meta_value',
	'order'				=> 'DESC'
);


// query
$the_query = new WP_Query( $args );

?>
<?php if( $the_query->have_posts() ): ?>

	<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
	 <div class="col5b">
			<a class="product-card" href="<?php the_permalink(); ?>">
      
        <div class="hero-left">     
 
        <div class="product-card__image">
				<div class="img-container">
    
    
				<img src="<?php the_field('obrazek-byty'); ?>" />
        
        </div>
        <div class="priznak-byty" style="background-color:<?php the_field('barva_priznaku_byty'); ?> ;"><?php the_field('priznak_byty'); ?> </div>
        </div>
        
        </div>
        
         <div class="hero-content">
        <div class="product-card__head">
				<h2 class="nadpis-byty"><?php the_title(); ?></h2>
        </div>
        
        
        
  <div class="product-card-info">      
  <ul class="info-byty">
    <li class="svg-dispozice-list">
    <?php the_field('dispozice-byty'); ?>
   </li>
        
  <li class="svg-adresa-list">  
  <?php the_field('ulice-byty'); ?>
  </li> 
        </ul>
  </div>      
        
       <hr class="mezera-karta" /> 
      <div class="product-card__body">
      
      <?php $excerpt = wp_trim_words( get_field('text-byty' ), $num_words = 12, $more = '...' ); ?>
				<p class="popisek-byty"><?php echo $excerpt; ?></p>
        
        
        
    </div> 
  <div class="product-card-info mt-2 mb-2">      
  <ul class="info-byty">
    <li class="svg-mesicni-najem">
    <?php the_field('mesicni_najem_byty'); ?>  Kč +   <?php the_field('energie_byty'); ?> Kč 
   </li>
        
  
  </ul>
  </div>  
      </div>  
			</a>
		</div>	
	<?php endwhile; ?>

<?php endif; ?>

<?php wp_reset_query();	 // Restore global post data stomped by the_post(). ?> 

  
 <div class="col5b">
 <div class="pl-4 pr-4 product-card product-card2">
 <div class="counter-byty mt-4"> 
 <h2>+<?php the_field('bytu_k_pronajmu', 'option'); ?></h2><p>BYTŮ  K<br /> PRONÁJMU</p>
 </div>
 <div class="counter-obchody"> 
 <h2>+<?php the_field('komerci_k_pronajmu', 'option'); ?></h2><p>OBCHODNÍCH <br /> PROSTOR</p>
 </div>
 <p>Prohlédněte si celou naší nabídku bytů a obchodních prostor k pronájmu. </p>
 <div class="mt-5 mb-3">
  <a href="/pronajem-bytu/" class="btn btn-lg tlacitko mt-5 width-100">
	<i class="icon icon-hands"><img class="img-fluid svg" width="17px" height="22px" src="/wp-content/themes/understrap/img/svg/dalsi_nabidky.svg" /></i>
	Zobrazit vše
	</a>
 </div>
 </div>
 </div>                 
 </div>
  <?php endif; ?>
 
 <?php  if ( 'pronajem_obchodu' == get_post_type() ) : ?>
<div class="row mt-5 mb-2">
<div class="col-12">
<h2 class="nadpis-cerny">Podobné nabídky </h2>

</div>
</div>
<div class="row ">
                 <?php 
$args = array(
  'posts_per_page' => 4,
	'post_type'		=> 'pronajem_obchodu',
  'meta_key'			=> 'priznak_byty',
	'orderby'			=> 'meta_value',
	'order'				=> 'DESC'
);


// query
$the_query = new WP_Query( $args );

?>
<?php if( $the_query->have_posts() ): ?>

	<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
	 <div class="col5b">
			<a class="product-card" href="<?php the_permalink(); ?>">
      
           
         <div class="hero-left"> 
        <div class="product-card__image">
				<div class="img-container">
    
    
				<img src="<?php the_field('obrazek-byty'); ?>" />
        
        </div>
        <div class="priznak-byty" style="background-color:<?php the_field('barva_priznaku_byty'); ?> ;"><?php the_field('priznak_byty'); ?> </div>
        </div>
        
        </div>
        <div class="hero-content">
        <div class="product-card__head">
				<h2 class="nadpis-byty"><?php the_title(); ?></h2>
        </div>
        
        
        
  <div class="product-card-info">      
  <ul class="info-byty">
    <li class="svg-dispozice-list">
    <?php the_field('dispozice-byty'); ?>
   </li>
        
  <li class="svg-adresa-list">  
  <?php the_field('ulice-byty'); ?>
  </li> 
        </ul>
  </div>      
        
       <hr class="mezera-karta" /> 
      <div class="product-card__body">
      
      <?php $excerpt = wp_trim_words( get_field('text-byty' ), $num_words = 12, $more = '...' ); ?>
				<p class="popisek-byty"><?php echo $excerpt; ?></p>
        
        
        
    </div> 
  <div class="product-card-info mt-2 mb-2">      
  <ul class="info-byty">
    <li class="svg-mesicni-najem">
    <?php the_field('mesicni_najem_byty'); ?>  Kč +   <?php the_field('energie_byty'); ?> Kč 
   </li>
        
  
  </ul>
  </div>  
      </div>  
			</a>
		</div>	
	<?php endwhile; ?>

<?php endif; ?>

<?php wp_reset_query();	 // Restore global post data stomped by the_post(). ?> 
  
 

  
 <div class="col5b">
 <div class="pl-4 pr-4 product-card product-card2">
 <div class="counter-byty mt-4"> 
 <h2>+<?php the_field('bytu_k_pronajmu', 'option'); ?></h2><p>BYTŮ K <br /> PRONÁJMU</p>
 </div>
 <div class="counter-obchody"> 
 <h2>+<?php the_field('komerci_k_pronajmu', 'option'); ?></h2><p>OBCHODNÍCH <br /> PROSTOR</p>
 </div>
 <p>Prohlédněte si celou naší nabídku bytů a obchodních prostor k pronájmu. </p>
 <div class="mt-5 mb-3">
  <a href="/obchodni-prostory/" class="btn btn-lg tlacitko mt-5 width-100">
	<i class="icon icon-hands"><img class="img-fluid svg" width="17px" height="22px" src="/wp-content/themes/understrap/img/svg/dalsi_nabidky.svg" /></i>
	Zobrazit vše
	</a>
 </div>
 </div>
 </div>                 
 </div>
  <?php endif; ?>
  
 
 
  
   <?php endif; ?>