mgibbs189

{{gist file=”full-map.php” lang=”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(‘‘);?>
<h3>Search</h3>
<?php echo do_shortcode(‘‘);?>
<h3>Choose Type</h3>
<?php echo do_shortcode(‘‘);?>
<h3>Has Potable Water?</h3>
<?php echo do_shortcode(‘‘);?>
</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> | © <?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>
{{/gist}}