<?php
/*
Template Name: Page contact
*/
?>

<?php get_header(); ?>

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script type="text/javascript">
  (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,
      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(function(){
   
    $('.acf-map').each(function(){
   
      render_map( $(this) );
   
    });
  });
  })(jQuery);
  </script>


  <div class="box-resp">
    <h2>Vous avez une question ?</h2>
    <?php echo do_shortcode('[contact-form-7 id="72" title="Formulaire de contact"]'); ?>
  </div><!--
  --><div class="box-resp">
  <h2>Nous trouver</h2>
  <p><?php the_field('adresse'); ?> - <?php the_field('ville'); ?></p>
  <p><?php if( have_rows('numeros') ): ?>
      <?php while( have_rows('numeros') ): the_row(); ?>
        <?php the_sub_field('numeros-type'); ?>&nbsp;:&nbsp;<?php the_sub_field('numeros-numero'); ?> &nbsp;
      <?php endwhile; // end of the loop. ?>
    <?php endif; // if( get_field('to-do_lists') ): ?>
    </p><p>Mail : <a href="mailto:<?php the_field('email'); ?>"><?php the_field('email'); ?></a>
    </p>

  <?php 
    $location = get_field('google-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>



<?php get_footer(); ?>