<div id="real-estate-box" class="slideout">
  <div class="real-estate-box-wrapper">
    <p class="real-estate-box-title">For sale</p>
  </div>
  <div class="slideout-inner">
    <?php
      $args = array(
        'post_type'=> 'real-estete',
        'posts_per_page' => 4,
        'orderby' => 'date',
        'order' => 'DESC',
      );
      query_posts($args);

      ?>
        <div class="see-all-real-estate col-xl-12">
          <?php echo '<a href="' . get_bloginfo('url') .'/realestate">see all</a>';	?>
        </div>
        <ul>
          <?php
	          $map_id = 1;
            if ( have_posts() ) :
            while ( have_posts() ) : the_post();
            $meta = get_post_meta( $post->ID, 'real_estate_location_details', true );
          ?>
         <script type="text/javascript">
          google.maps.event.addDomListener(window, 'load', function() {
            var map new google.maps.Map(document.getElementById('map-<?= $map_id ;?>'), {
				  center: {
					  lat: "<?= $meta['lat']; ?>",
					  lng: "<?= $meta['lng']; ?>"
				  },
				  zoom: 5
			  });
          });
          </script>
          <li class="col-xl-3">
            <a class="real-estate-title" href="<?php the_permalink() ?>">
              <?php the_title(); ?>
            </a><!-- .real-estate-title -->
            <div id="map-container">
            	<div class="mapholder" id="map-<?= $map_id ;?>"></div>
            </div><!-- #map-container -->
            <a href="<?php the_permalink() ?>" class="real-estate-btn">see more</a>
          </li><!-- .col-xl-4 -->
          <?php
				$map_id++;
            endwhile; ?>
        </ul>
    <?php
      else:
        echo '<p class="no-real-estete">We don\'t have any real estates for sale on the moment</p>';
      endif;
    ?>
  </div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5rsZHHAmzP_pOuHGKEUtarn2QideIyUM" async defer></script>
</div>