rentageekmom of LDM Devs
7/17/2015 - 11:59 PM
Google Maps API pulls in custom post types with custom field data and taxonomy filtering control.
Google Maps API pulls in custom post types with custom field data and taxonomy filtering control.
<?php
// Places a Google Map with filterable options
// Filters are pulled from a taxonomy. Replace 'places-categories' with your own taxonomy name
// Shows how to pull two different custom post type records and place on map
// Based on custom fields. Edit as needed.
// No automatic geocoding of addresses; requiring lat/lng from user.
?>
<div class="row map-row fixed">
<div style="position:absolute; z-index:999; top:10px; right:10px; width:180px; height:auto; background:#fff;" class="map-legend desktop">
<label style="margin-bottom:0"><input type="checkbox" id="live" value="live" class="pois-checkbox" disabled checked/><img width="20" src="http://westloop.dev-luxury2.launchdigitalmarketing.com/wp-content/uploads/sites/20/2015/07/property_icon.png" alt="Live"><span>Live</span></label>
<hr>
<?php
$placecats = get_terms('place-categories');
foreach ($placecats as $cat) {
$catImgRaw = get_field('legend_icon', 'place-categories_'.$cat->term_id);
echo '<label><input type="checkbox" id="'.$cat->name.'" value="'.$cat->name.'" class="pois-checkbox" checked/><img width="20" src="'.$catImgRaw.'"><span>'.$cat->name.'</span></label>';
}
?>
</div>
<div id="map-legend-mobile" class="collapse" style="position:absolute; z-index:999; top:0px; left:5%; width:90%;">
<div style="height:auto; background:#fff;" class="map-legend mobile">
<h3>CATEGORIES</h3><p>Select to show on map</p>
<label style="margin-bottom:0" class="active"><input type="checkbox" id="live" value="live" class="" disabled checked/><img width="25" src="http://westloop.dev-luxury2.launchdigitalmarketing.com/wp-content/uploads/sites/20/2015/07/property_icon.png" alt="Live"><span>Live</span></label>
<?php
$placecats = get_terms('place-categories');
foreach ($placecats as $cat) {
$catImgRaw = get_field('legend_icon', 'place-categories_'.$cat->term_id);
echo '<label class="active"><input type="checkbox" id="'.$cat->name.'" value="'.$cat->name.'" class="pois-checkbox" checked/><img width="25" src="'.$catImgRaw.'"><span>'.$cat->name.'</span></label>';
}
?>
<div class="action-buttons-map">
<button class="clear-all">Clear All</button> <button class="close-toggle" data-target="#map-legend-mobile" data-toggle="collapse">Done</button>
</div>
</div>
</div>
<div id="map-canvas"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var mapModule = (function () {
var m = {};
m.properties = [
<?php
$posts = get_posts( array( 'post_type'=>'property', 'posts_per_page' => -1) );
foreach($posts as $post){
$postId = $post->ID;
$lat = get_field('latitude', $postId);
$lon = get_field('longitude', $postId);
//$img = get_field('map_icon', $postId);
//if(!$img){
$img = 'http://westloop.dev-luxury2.launchdigitalmarketing.com/wp-content/uploads/sites/20/2015/07/property_icon.png';
//}
$featImg = wp_get_attachment_url( get_post_thumbnail_id($postId) );
$address = get_field('address', $postId);
$url = get_permalink($postId);
$desc = str_replace(array("\r", "\n"), "<br />", strip_tags(get_field('mobile_summary', $postId)));
echo '
{"name":"'.$post->post_title.'",
"ltlng" : {"lat": '.(float)$lat.', "lng": '.(float)$lon.'},
"postId" :"'.$postId.'",
"img" :"'.$img.'",
"url" :"'.$url.'",
"featImg" :"'.$featImg.'",
"address" :"'.$address.'",
"desc" :"'.$desc.'",
},';
}
?>
];
m.pois = [
<?php
$posts = get_posts( array( 'post_type'=>'place', 'posts_per_page' => -1) );
foreach($posts as $post){
$postId = $post->ID;
$categories = get_the_terms( $postId, 'place-categories');
$cat = $categories[0]->name;
$catID = $categories[0]->term_id;
$catImgRaw = get_field('map_icon', 'place-categories_'.$catID);
$lat = get_field('latitude', $postId);
$lon = get_field('longitude', $postId);
$img = $catImgRaw;
$featImg = wp_get_attachment_url( get_post_thumbnail_id($postId) );
$address = get_field('address', $postId);
$desc = str_replace(array("\r", "\n"), "", strip_tags(get_field('short_description', $postId)));
echo '{"name":"'.$post->post_title.'", "ltlng": {"lat": '.(float)$lat.', "lng": '.(float)$lon.'}, "cat": "'.$cat.'", "postId":"'.$postId.'",
"img" :"'.$img.'",
"featImg" :"'.$featImg.'",
"address" :"'.$address.'",
"desc" :"'.$desc.'",
},
' ;
}
?>
];
m.markers = [];
m.poisMarkers = [];
m.mapOptions = {
center: {lat: 41.881476, lng: -87.653428},
zoom: 15,
};
m.map = {}
m.iterator = 0;
m.poisIterator = 0;
m.drop = function () {
for (var i = 0; i < m.properties.length; i++) {
m.addMarker();
}
}
m.poisDrop = function () {
for (var i = 0; i < m.pois.length; i++) {
m.addPoisMarker();
}
}
m.addMarker = function () {
var propertyImage = {
url: m.properties[m.iterator].img,
size: new google.maps.Size(35, 45),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0,45),
scaledSize: new google.maps.Size(35, 45)
};
var marker = new google.maps.Marker({
position: m.properties[m.iterator].ltlng,
icon: propertyImage,
map: m.map,
draggable: false,
postId: m.properties[m.iterator].postId
});
marker.info = new google.maps.InfoWindow({
content: '<table style="border:1px solid #333;"><tr><td valign="top" ><div style="width:150px; height:150px; margin-right:5px; background:url('+ m.properties[m.iterator].featImg+'); background-size:cover;"</div></td><td><h3 style="font-size:16px;"><a href="'+ m.properties[m.iterator].url+'">'+ m.properties[m.iterator].name+'</a></h3><h4 style="font-size:13px; font-weight:200;">'+ m.properties[m.iterator].address+'</h4><p style="font-size:11px; font-weight:200;">'+ m.properties[m.iterator].desc+'</p></td></tr></table>',
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(m.map, marker);
});
m.markers.push(marker);
m.iterator++;
}
m.addPoisMarker = function () {
var poiImage = {
url: m.pois[m.poisIterator].img,
size: new google.maps.Size(35, 45),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0,45),
scaledSize: new google.maps.Size(35, 45)
};
var marker = new google.maps.Marker({
position: m.pois[m.poisIterator].ltlng,
icon: poiImage,
cat: m.pois[m.poisIterator].cat,
map: m.map,
draggable: false,
postId: m.pois[m.poisIterator].postId
});
marker.info = new google.maps.InfoWindow({
content: '<table style="border:1px solid #333;"><tr><td valign="top" ><div style="width:150px; height:150px; margin-right:5px; background:url('+ m.pois[m.poisIterator].featImg+'); background-size:cover;"</div></td><td><h3 style="font-size:16px;">'+ m.pois[m.poisIterator].name+'</h3><h4 style="font-size:13px; font-weight:200;">'+ m.pois[m.poisIterator].address+'</h4><p style="font-size:11px; font-weight:200;">'+ m.pois[m.poisIterator].desc+'</p></td></tr></table>',
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(m.map, marker);
});
m.poisMarkers.push(marker);
m.poisIterator++;
}
m.showPois = function (cat) {
for (var i = 0; i < m.poisMarkers.length; i++) {
if (!cat) {
m.poisMarkers[i].setVisible(true);
} else {
if (m.poisMarkers[i].cat.search(cat) >= 0) {
m.poisMarkers[i].setVisible(true);
}
}
}
}
m.hidePois = function (cat) {
for (var i = 0; i < m.poisMarkers.length; i++) {
if (!cat) {
m.poisMarkers[i].setVisible(false);
} else {
if (m.poisMarkers[i].cat.search(cat) >= 0) {
m.poisMarkers[i].setVisible(false);
}
}
}
}
m.ini = function () {
m.map = new google.maps.Map(document.getElementById('map-canvas'), m.mapOptions);
}
return m;
})();
jQuery(window).load(function () {
mapModule.ini();
mapModule.drop();
mapModule.poisDrop();
jQuery('.pois-checkbox').on('change', function(){
var value = jQuery(this).val();
if(jQuery(this).is(':checked')){
jQuery(this).parents('label').addClass('active');
showMarkers(value);
}else{
jQuery(this).parents('label').removeClass('active');
hideMarkers(value);
}
})
});
// google.maps.event.addDomListener(window, 'load', mapModule.ini);
function hideMarkers(cat) {
mapModule.hidePois(cat);
}
function showMarkers(cat) {
mapModule.showPois(cat);
}
jQuery(document).ready(function(){
jQuery('.clear-all').click(function() {
options = jQuery('.pois-checkbox');
options.each(function(){
jQuery(this).prop('checked',false);
jQuery(this).parents('label').removeClass('active');
hideMarkers(this);
});
});
});
</script>