single-branches.php

<?php
/**
 * The Template for displaying all Single Branch post.
 *
 */
get_header(); ?>

<div class="banner">
<h1><?php the_title(); ?></h1>
</div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>

  (function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type  function
*  @date  8/11/2013
*  @since 4.3.0
*
*  @param $el (jQuery element)
*  @return  n/a
*/

  function render_map( $el ) {

    // var
    var $markers = $el.find('.marker');

    // vars
    var args = {
      zoom    : 16,
      scrollwheel: false,
      center    : new google.maps.LatLng(0, 0),
      mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    // create map
    var map = new google.maps.Map( $el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function(){

        add_marker( $(this), map );

    });

    // center map
    center_map( map );

  }

  /*
  *  add_marker
  *
  *  This function will add a marker to the selected Google Map
  *
  *  @type  function
  *  @date  8/11/2013
  *  @since 4.3.0
  *
  *  @param $marker (jQuery element)
  *  @param map (Google Map object)
  *  @return  n/a
  */

  function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    // create marker
    var marker = new google.maps.Marker({
      position  : latlng,
      map     : map
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
      // create info window
      var infowindow = new google.maps.InfoWindow({
        content   : $marker.html()
      });

      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {

        infowindow.open( map, marker );

      });
    }

  }

  /*
  *  center_map
  *
  *  This function will center the map, showing all markers attached to this map
  *
  *  @type  function
  *  @date  8/11/2013
  *  @since 4.3.0
  *
  *  @param map (Google Map object)
  *  @return  n/a
  */

  function center_map( map ) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){

      var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

      bounds.extend( latlng );

    });

    // only 1 marker?
    if( map.markers.length == 1 )
    {
      // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
      // fit to bounds
      map.fitBounds( bounds );
    }

  }

  /*
  *  document ready
  *
  *  This function will render each map when the document is ready (page has loaded)
  *
  *  @type  function
  *  @date  8/11/2013
  *  @since 5.0.0
  *
  *  @param n/a
  *  @return  n/a
  */

  $(document).ready(function(){

    $('.acf-map').each(function(){

      render_map( $(this) );

    });

  });

})(jQuery);

</script>



<div class="content" role="main">
  <div class="inside">
    <div class="map">
  <?php
    $location = get_field('branch_map');

    if( !empty($location) ):
    ?>

    <div class="acf-map">
      <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
      </div>
    </div>
    <?php endif; ?>
</div>
    <div class="single-branch-details">
      <?php if( have_posts() ) : the_post(); ?>

        <h1><?php the_title(); ?></h1>
        <ul>
          <li><span>Address:</span> <?php the_content(); ?></li>

          <!-- check if branch-tel is not empty before rendering -->
          <?php if( get_field('branch_tel') ): ?>
          <li><span>Phone:</span> <a href="tel:<?php the_field('branch_tel'); ?>"><?php the_field('branch_tel'); ?></a></li>
          <?php endif; ?>

          <!-- check if branch-mobile is not empty before rendering -->
          <?php if( get_field('branch_mobile') ): ?>
          <li><span>Mobile:</span> <a href="tel:<?php the_field('branch_mobile'); ?>"><?php the_field('branch_mobile'); ?></a></li>
          <?php endif; ?>

          <?php if( get_field('operation_hours') ): ?>
          <li><span>Operation Hours:</span> <?php the_field('operation_hours'); ?></li>
          <?php endif; ?>

          <?php if( get_field('family_section') ): ?>
          <li><span>With</span> Family section</li>
          <?php endif; ?>
        </ul>
      <?php endif; ?>
    </div> <!-- end of .single-branch-details -->

    <!-- adds social share buttons -->
    <?php get_ssb($order = array('fblike' => 1, 'twitter' => 2, 'googleplus' => 3)); ?>

    <!-- enable comments -->
    <?php comments_template( '', true ); ?>
  </div> <!-- end of .inside -->
</div> <!-- end of .content -->

<?php get_footer(); ?>