Created
October 8, 2016 10:16
-
-
Save leanda/2233eac6408e572e1f27350cdebfa554 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type="text/css"> | |
.acf-map { | |
width: 100%; | |
height: 400px; | |
border: #ccc solid 1px; | |
margin: 20px 0; | |
} | |
/* fixes potential theme css conflict */ | |
.acf-map img { | |
max-width: inherit !important; | |
} | |
</style> | |
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVzlbXQizbTjHudN0xxqaUr7WWJu-o5cI"></script> | |
<script type="text/javascript"> | |
(function($) { | |
/* | |
* new_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 new_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 ); | |
// return | |
return 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 ); | |
}); | |
// close info window when map is clicked | |
google.maps.event.addListener(map, 'click', function(event) { | |
if (infowindow) { | |
infowindow.close(); } | |
}); | |
} | |
} | |
/* | |
* 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 | |
*/ | |
// global var | |
var map = null; | |
$(document).ready(function(){ | |
$('.acf-map').each(function(){ | |
// create map | |
map = new_map( $(this) ); | |
}); | |
}); | |
})(jQuery); | |
</script> | |
<?php | |
$category = get_query_var( 'map_areas' ); | |
$mapposts = new WP_Query( array( | |
'post_status' => 'publish', | |
'post_type' => 'trees', | |
'tax_query' => array( | |
array( | |
'taxonomy' => 'map_areas', | |
'field' => 'slug', | |
'terms' => "$category" | |
) | |
), | |
'posts_per_page' => -1, //sets to unlimited to pull all posts | |
) ); | |
?> | |
<div class="acf-map"> | |
<?php while ( $mapposts->have_posts() ) : $mapposts->the_post(); ?> | |
<?php | |
$location = get_field('map_tree_location'); | |
$gtemp = explode (',', implode($location)); | |
$coord = explode (',', implode($gtemp)); | |
?> | |
<div class="marker" data-lat="<?php echo $location[lat]; ?>" data-lng="<?php echo $location[lng]; ?>"> | |
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><h1 class="entry-title"><?php the_title(); ?></h1></a> | |
<?php if( get_field('date_planting_cambridge') ): ?> | |
<h3 class="planting-date">Date of Planting in Cambridge</h3> | |
<?php the_field('date_planting_cambridge'); ?> | |
<?php endif; ?> | |
<?php if( get_field('variety_name') ): ?> | |
<?php | |
$terms = get_the_terms( get_the_ID(), 'variety'); | |
if( !empty($terms) ) { | |
$term = array_pop($terms); | |
$custom_field = get_field('variety_name', $term ); | |
} | |
?> | |
<h3 class="variety">Variety Name</h3> | |
<?php echo $term->name; ?> | |
<?php endif; ?> | |
<?php if( get_field('apple_type') ): ?> | |
<?php | |
$field = get_field_object('apple_type'); | |
$value = get_field('apple_type'); | |
$label = $field['choices'][ $value ]; | |
?> | |
<h3 class="apple">Apple Type</h3> | |
<?php echo $label; ?> | |
<?php endif; ?> | |
<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">View full details for this tree →</a></p> | |
</div> | |
<?php endwhile; ?> | |
</div><!-- .acf-map --> | |
<?php wp_reset_query(); // Restore global post data stomped by the_post(). ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment