full-map.php

<?php /* Template Name: Full Map Facet Search */ ?>

<?php include('content/map-header.php');  // special header for map search page ?>

<div id="#map-page-content-container">
    
    <button id="map-trigger">Search Map</button>


    
  <div id="slideout">
    <div id="slideout-inner">

        <?php // echo do_shortcode('[facetwp facet="proximity"]');?>
      <h3>Search</h3>
        <?php echo do_shortcode('[facetwp facet="search"]');?>
      <h3>Choose Type</h3>
        <?php echo do_shortcode('[facetwp facet="choose_type"]');?>
      <h3>Has Potable Water?</h3>
        <?php echo do_shortcode('[facetwp facet="has_water"]');?>
    </div>
  </div>



    <div id="map" style="width:100%;"></div>


<!-- Google Maps -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA8a7GvlidgiqSbwIE6kYGUhrq1WeL3Jqw&"></script>

<?php
/*
Store the locations into a PHP array
*/
$locations = array();
$args = array( 'post_type' => array('oregon','washington','oregon-attractions','wa-attraction'),'orderby' => 'title', 'order' => 'asc', 'posts_per_page' => -1,'facetwp' => true);
$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();
    $locations[] = array(
        'title' => get_the_title(),
        'description' => '<div class="map-marker"><a href="' . get_permalink() . '" class="marker-title">' . get_the_title() . get_the_post_thumbnail("archive-thumb", array("class" => "map-search-thumb")). '</a></div>',
        'position' => array(get_post_meta($post->ID, 'lat', true), get_post_meta($post->ID, 'long', true)),
        'type' => get_field( 'Type' ) ? get_field( 'Type' ) : 'campground',
    );
endwhile;
?>

<div class="facetwp-template">
    <script type="text/javascript">
    var infowindow = new google.maps.InfoWindow();//=====Initialise InfoWindow
    var markers = [];
        function initialize() {
        
         map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: new google.maps.LatLng(45.531817, -122.674271),
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_RIGHT},
            zoomControl: true,
            zoomControlOptions: {position: google.maps.ControlPosition.TOP_RIGHT},
            scaleControl: true,
            streetViewControl: false,
            fullscreenControl: true,
            mapTypeId: 'roadmap',
            styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"on"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"on"},{"color":"#716464"},{"weight":"0.01"}]},{"featureType":"administrative.country","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"simplified"},{"color":"#a05519"},{"saturation":"-13"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#84afa3"},{"lightness":52}]},{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"visibility":"on"}]}]
          });


      var iconBase = '<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/markers/';
      var icons = {
          waterfall: {icon: iconBase + 'Waterfall.png'},
          trailhead: {icon: iconBase + 'trailhead.png'},
          day_use: {icon: iconBase + 'day_use.png'},
          state_park: {icon: iconBase + 'state_park.png'},
          viewpoint: {icon: iconBase + 'viewpoint.png'},
          cave: {icon: iconBase + 'cave.png'},
          lake: {icon: iconBase + 'lake.png'},
          hot_springs: {icon: iconBase + 'hotspring.png'},
          lighthouse: {icon: iconBase + 'lighthouse.png'},
          campground: {icon: iconBase + 'tent.png'}
      };

    function addMarker(location) {
        var marker = new google.maps.Marker({
          title: location.title,
          position: new google.maps.LatLng(location.position[0], location.position[1]),
          description: location.description,
          icon: icons[location.type].icon,
          map: map
        });

        //=====Eventlistener for InfoWindow
        google.maps.event.addListener(marker, 'click', function() {  
                  infowindow.setContent(location.description); 
                  infowindow.open(map,marker);


        });
    }


  var locations = <?php echo json_encode( $locations ); ?>;

  for (var i = 0; i < locations.length; i++) {
    addMarker(locations[i]);
  }
}
     
        initialize();
    </script>

</div>


</div><!--#content-container-->

<div id="sub-footer" class="map-fixed-footer">
  <p id="copyright"><a href="<?php echo esc_url(home_url());?>/about-us/terms-of-use/">Terms of Use</a> | &copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. | <a href="<?php echo esc_url(home_url());?>/about-us/disclaimer/">Disclaimers</a></p>
</div>

    <?php wp_footer(); ?>

  </body>
</html>