Skip to content

Instantly share code, notes, and snippets.

Created June 20, 2017 17:19
Show Gist options
  • Save anonymous/454a7fafdebc6bee11b385d937dbcc84 to your computer and use it in GitHub Desktop.
Save anonymous/454a7fafdebc6bee11b385d937dbcc84 to your computer and use it in GitHub Desktop.
<?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>
<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: location.position,
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 $i = 1; $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 );?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
{ title: '<?php the_title(); ?>',
description: '<div class="map-marker"><a href="<?php the_permalink();?>" class="marker-title"><?php the_title(); ?><?php the_post_thumbnail('archive-thumb', array('class' => 'map-search-thumb'));?></a></div>',
position: new google.maps.LatLng(<?php echo get_post_meta($post->ID, 'lat', true); ?>, <?php echo get_post_meta($post->ID, 'long', true); ?>),
type: '<?php if ( get_field( "Type") ): ?><?php the_field("Type");?><?php else: ?>campground<?php endif;?>' },
<?php $i++; endwhile; ?>
];
for (var i = 0, location; location = locations[i]; i++) {
addMarker(location);
}
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment