<?php
$args = array(
'orderby' => 'title',
'order' => 'ASC',
'post_type' => 'locations',
'posts_per_page' => -1,
'hierarchical' =>true
);
$the_query = new WP_Query( $args );
$i=0;
$inc=1;
?>
<div class="flex row brk-900-col mg-0">
<div class="section-location flex col justify-center site-color-1-bk map-info cover back-pos-center no-repeat brk-900-order-2">
<div class="map-info-inner-top transition-05">
</div>
<div class="map-info-inner fadeflag transition-05 opacity-0">
</div>
</div>
<div class="flex col grow-1 brk-900-order-1">
<div class="text-center flex col brk-900-order-2">
<div class="flex row mg-0 row-wrap brk-900-col justify-center pointer font-20 brk-1800-font-16 brk-900-font-13 map-categories-holder site-color-2-bk">
<div class="all-button flex col justify-center site-white site-color-1-bk-hover transition-05 grow-1 brk-900-w-initial site-color-2-bk"><div class="pd-20 brk-900-pd-10">All</div></div>
<div class="dining-button flex col justify-center site-white site-color-1-bk-hover transition-05 grow-1 brk-900-w-initial site-color-2-bk"><div class="pd-20 brk-900-pd-10">Dining</div></div>
<div class="shopping-button flex col justify-center site-white site-color-1-bk-hover transition-05 grow-1 brk-900-w-initial site-color-2-bk"><div class="pd-20 brk-900-pd-10">Shopping</div></div>
<div class="entertainment-button flex col justify-center site-white site-color-1-bk-hover transition-05 grow-1 brk-900-w-initial site-color-2-bk"><div class="pd-20 brk-900-pd-10">Entertainment</div></div>
<div class="schools-button flex col justify-center site-white site-color-1-bk-hover transition-05 grow-1 brk-900-w-initial site-color-2-bk"><div class="pd-20 brk-900-pd-10">Schools</div></div>
<div class="parks-button flex col justify-center site-white site-color-1-bk-hover transition-05 grow-1 brk-900-w-initial site-color-2-bk"><div class="pd-20 brk-900-pd-10">Parks</div></div>
</div>
</div>
<div id="map_canvas" class="w-100-p grow-1 flex col brk-900-order-1"></div>
</div>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkGpMmrzGLkZnsr1r4Yku3kp89_KiikPY&v=3&"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/markerwithlabel.js"></script>
<script type="text/javascript">
function changeImage(className,displayImage,displayType,mainClass,activeClass,currentElement){
var url='url(' + displayImage + ')';
$("."+className).css({"display":"none"});
$("."+className).css({"background-image":url});
$("."+className).fadeIn(500).css({"display":displayType});
$("."+mainClass).removeClass(activeClass);
$("."+currentElement).addClass(activeClass);
}
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
var styledMapType = new google.maps.StyledMapType(
[
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#333333"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#fefefe"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
},
{
"lightness": 21
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#dedede"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#f2f2f2"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#e9e9e9"
},
{
"lightness": 17
}
]
}
],
{name: 'Styled Map'});
var myLatlng;
var zcounter;
var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
// ***************************************************
// ############## LOAD MARKERS #######################
// ***************************************************
var marker = [];
var icon_a = [];
var icon_b = [];
var infowindow = [];
var markercat;
function load_map(category){
var bounds = new google.maps.LatLngBounds();
var counter=0;
for (var i = 0; i < marker.length; i++ ){
if(marker[i]){
marker[i].setMap(null);
}
}
marker.length = 0;
marker = [];
icon_a = [];
icon_b = [];
infowindow = [];
<?php $i=0; while ($the_query->have_posts()) : $the_query->the_post(); ?>
markercat = '<?php echo get_field('location_category'); ?>';
if(markercat==category || markercat == 'Home' || category=='All'){
myLatlng = {lat: <?php echo get_field('lat'); ?>, lng: <?php echo get_field('lng'); ?>};
<?php
if(get_field('location_category')=="Home"){
$mapon=THEME_DIR."/images/map-icon-home.png";
$mapoff=THEME_DIR."/images/map-icon-home.png";
}
if(get_field('location_category')=="Shopping"){
$mapon=THEME_DIR."/images/map-icon-shopping-on.png";
$mapoff=THEME_DIR."/images/map-icon-shopping.gif";
}
if(get_field('location_category')=="Dining"){
$mapon=THEME_DIR."/images/map-icon-dining-on.png";
$mapoff=THEME_DIR."/images/map-icon-dining.gif";
}
if(get_field('location_category')=="Entertainment"){
$mapon=THEME_DIR."/images/map-icon-entertainment-on.png";
$mapoff=THEME_DIR."/images/map-icon-entertainment.gif";
}
if(get_field('location_category')=="Schools"){
$mapon=THEME_DIR."/images/map-icon-schools-on.png";
$mapoff=THEME_DIR."/images/map-icon-schools.gif";
}
if(get_field('location_category')=="Parks"){
$mapon=THEME_DIR."/images/map-icon-parks-on.png";
$mapoff=THEME_DIR."/images/map-icon-parks.gif";
}
if(get_field('location_category')=="Galleries"){
$mapon=THEME_DIR."/images/map-icon-galleries-on.png";
$mapoff=THEME_DIR."/images/map-icon-galleries.gif";
}
?>
icon_a[<?php echo $i; ?>] = {
url: "<?php echo $mapoff; ?>", // url
scaledSize: new google.maps.Size(40, 40), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0,0), // anchor
};
icon_b[<?php echo $i; ?>] = {
url: "<?php echo $mapon; ?>", // url
scaledSize: new google.maps.Size(40, 40), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0,0), // anchor
};
if(counter>0)thelabel=counter.toString(); else thelabel="<?php echo get_the_title(); ?>";
marker[<?php echo $i; ?>] = new MarkerWithLabel({
position: myLatlng,
map: map,
icon: icon_a[<?php echo $i; ?>],
// labelContent: '<span>' + thelabel + '</span>',
// labelAnchor: new google.maps.Point(80, -43),
// labelClass: "markerlabels"
});
counter++;
bounds.extend(marker[<?php echo $i; ?>].getPosition());
infowindow[<?php echo $i; ?>] = new google.maps.InfoWindow({ content: '<div class="map-info-box"><a href="<?php echo get_field('website'); ?>" target="_blank"><h1><?php echo addslashes(get_the_title()); ?></h1></a><?php if(get_field('image')){ ?><div class="cover no-repeat back-pos-center mgb-5" style="background-image:url(<?php echo get_field('image'); ?>);min-height:100px;"></div><?php } ?><h2><?php echo get_field('phone'); ?></h2><p><?php echo get_field('address'); ?><br /><?php echo get_field('city'); ?>, <?php echo get_field('state'); ?> <?php echo get_field('zip_code'); ?></p><p><span><a href="http://www.google.com/maps/place/<?php echo get_field('address'); ?> + <?php echo get_field('city'); ?> + <?php echo get_field('state'); ?> + <?php echo get_field('zip_code'); ?>">GET DIRECTIONS</a> | <a href="<?php echo get_field('website'); ?>" target="_blank">VISIT WEBSITE</a></span></p></div>'});
// ***************************************************
// ############# MARKER CLICK FUNCTION ###############
// ***************************************************
google.maps.event.addListener(marker[<?php echo $i; ?>], 'click', function() {
closeallwindows(category);
marker[<?php echo $i; ?>].setIcon(icon_b[<?php echo $i; ?>]);
// infowindow[<?php echo $i; ?>].open(map,marker[<?php echo $i; ?>]);
marker[<?php echo $i; ?>].setZIndex(zcounter);
zcounter++;
linkcounter++;
var preBoxcontent=mapCategoryList(category);
var boxcontent='<div class="map-info-bak pd-30 mg-30"><h1 class="site-black font-30 font-w-400"><?php echo get_the_title(); ?></h1><div><?php echo get_field('phone'); ?><br /><?php echo get_field('address'); ?><br /><?php echo get_field('city'); ?>, <?php echo get_field('state'); ?><?php echo get_field('zip'); ?></div><h3><a class="site-black" href="http://www.google.com/maps/place/<?php echo get_field('address'); ?> + <?php echo get_field('city'); ?> + <?php echo get_field('state'); ?> + <?php echo get_field('zip_code'); ?>">GET DIRECTIONS</a> <a class="site-black" href="<?php echo get_field('website'); ?>">VISIT WEBSITE</a></h3></div>';
var postBoxcontent = preBoxcontent + boxcontent;
$(".map-info-inner-top").html(preBoxcontent);
$(".linkmarker-<?php echo $i; ?> div span").css({"box-shadow":"inset 0 0 0 1px #fff"});
displayMapWindow(boxcontent,'<?php echo get_field('image'); ?>');
mapCategoryLink(category);
});
linkcounter=0;
preload(['<?php echo get_field('image'); ?>']);
}
<?php $i++; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
$(document).ready(function(){
map.fitBounds(bounds);
});
// ***************************************************
// ############# CLOSE ALL WINDOWS ###################
// ***************************************************
function closeallwindows(category){
var mapicon = [];
<?php $i=0; while ($the_query->have_posts()) : $the_query->the_post(); ?>
markercat = '<?php echo get_field('location_category'); ?>';
if(markercat==category || markercat == 'Home' || category=='All'){
<?php
if(get_field('location_category')=="Home"){
$mapoff=THEME_DIR."/images/map-icon-home.png";
}
if(get_field('location_category')=="Shopping"){
$mapoff=THEME_DIR."/images/map-icon-shopping.gif";
}
if(get_field('location_category')=="Dining"){
$mapoff=THEME_DIR."/images/map-icon-dining.gif";
}
if(get_field('location_category')=="Entertainment"){
$mapoff=THEME_DIR."/images/map-icon-entertainment.gif";
}
if(get_field('location_category')=="Schools"){
$mapoff=THEME_DIR."/images/map-icon-schools.gif";
}
if(get_field('location_category')=="Parks"){
$mapoff=THEME_DIR."/images/map-icon-parks.gif";
}
if(get_field('location_category')=="Galleries"){
$mapoff=THEME_DIR."/images/map-icon-galleries.gif";
}
?>
mapicon[<?php echo $i; ?>] = {
url: "<?php echo $mapoff; ?>", // url
scaledSize: new google.maps.Size(40, 40), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0,0), // anchor
};
marker[<?php echo $i; ?>].setIcon(mapicon[<?php echo $i; ?>]);
infowindow[<?php echo $i; ?>].close();
}
<?php $i++; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
}
// #### END ####
}
// ***************************************************
// ############## DISPLAY MAP WINDOW #################
// ***************************************************
function displayMapWindow(boxcontent,bkimage,scrollflag){
if($(".map-info-inner").hasClass("fadeflag")){
$(".map-info-inner").css({"opacity":"1"});
$(".map-info-inner").removeClass("fadeflag");
}else{
if($(".map-info-inner").text().length > 0) {
$(".map-info-inner").addClass("myfadeinout");
$(".myfadeinout").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner").removeClass("myfadeinout");
});
}else{
$(".map-info-inner").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner").removeClass("myfadein");
});
}
}
if ($(".query-check").css("order") >= "1" ){
$(".map-info").css({"width":"30%"});
}
if ($(".query-check").css("order") >= "2" ){
}
if ($(".query-check").css("order") >= "3" ){
}
if ($(".query-check").css("order") >= "4" ){
$(".map-info").css({"width":"100%"});
}
if ($(".query-check").css("order") >= "5" ){
}
if ($(".query-check").css("order") >= "6" ){
}
$(window).resize(function() {
if ($(".query-check").css("order") >= "1" ){
$(".map-info").css({"width":"30%"});
}
if ($(".query-check").css("order") >= "2" ){
}
if ($(".query-check").css("order") >= "3" ){
}
if ($(".query-check").css("order") >= "4" ){
$(".map-info").css({"width":"100%"});
}
if ($(".query-check").css("order") >= "5" ){
}
if ($(".query-check").css("order") >= "6" ){
}
});
if ($(".query-check").css("order") >= "5" ){
headerheight=$('.mobile-header').height();
}else{
headerheight=$('.desktop-header').height();
}
if(!scrollflag){
thetop=$('.section-location').offset().top - headerheight;
$('html, body').animate({scrollTop: (thetop)},1000);
}
if(bkimage){
$(".map-info").css({"background-image":"url(" + bkimage + ")"});
}
$(".map-info-inner").html(boxcontent);
}
function mapCategoryList(category){
var htmlMarkup;
if(category=="All"){
var i=2;
}else{
var i=1;
}
var inc=1;
var maplink;
htmlMarkup='<div class="pd-30 mg-30 site-color-1-bk site-white">';
htmlMarkup=htmlMarkup +'<h2 class="font-35 font-w-300">' + category + '</h2>';
htmlMarkup=htmlMarkup +'<div class="flex row row-wrap pointer mg-0 font-20">';
<?php $i=0; while ($the_query->have_posts()) : $the_query->the_post(); ?>
markercat = '<?php echo get_field('location_category'); ?>';
if(markercat==category || (category=="All" && markercat !="Home")){
htmlMarkup=htmlMarkup + '<div class="maplink-' + i + ' flex col justify-center w-10-p brk-1800-w-15-p brk-1200-w-20-p text-center"><span class="pd-5 site-color-2-bk mg-5">' + inc + '</span></div> <div class="linkmarker-<?php echo $i; ?> maplink maplink-' + i + ' flex col justify-center w-90-p brk-1800-w-85-p brk-1200-w-80-p"><div class="mg-10"><span><?php echo get_the_title(); ?></span></div></div>';
i++;
inc++;
maplink='.maplink-' + i;
}
<?php $i++; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
htmlMarkup=htmlMarkup + '</div></div>';
return htmlMarkup;
}
function mapCategoryLink(category){
var i=0;
<?php $i=0; while ($the_query->have_posts()) : $the_query->the_post(); ?>
markercat = '<?php echo get_field('location_category'); ?>';
if(markercat==category || category=="All"){
i++;
maplink='.maplink-' + i;
$(maplink).click(function(){
google.maps.event.trigger(marker[<?php echo $i; ?>], 'click');
});
}
<?php $i++; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
}
$('.shopping-button').click(function(){
load_map('Shopping');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$(this).removeClass('site-color-2-bk');
$(this).addClass('site-color-1-bk');
boxcontent=mapCategoryList('Shopping');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('shopping_image'); ?>');
mapCategoryLink('Shopping');
});
$('.dining-button').click(function(){
load_map('Dining');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$(this).removeClass('site-color-2-bk');
$(this).addClass('site-color-1-bk');
boxcontent=mapCategoryList('Dining');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('dining_image'); ?>');
mapCategoryLink('Dining');
});
$('.entertainment-button').click(function(){
load_map('Entertainment');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$(this).removeClass('site-color-2-bk');
$(this).addClass('site-color-1-bk');
boxcontent=mapCategoryList('Entertainment');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('entertainment_image'); ?>');
mapCategoryLink('Entertainment');
});
$('.schools-button').click(function(){
load_map('Schools');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$(this).removeClass('site-color-2-bk');
$(this).addClass('site-color-1-bk');
boxcontent=mapCategoryList('Schools');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('schools_image'); ?>');
mapCategoryLink('Schools');
});
$('.parks-button').click(function(){
load_map('Parks');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$(this).removeClass('site-color-2-bk');
$(this).addClass('site-color-1-bk');
boxcontent=mapCategoryList('Parks');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('parks_image'); ?>');
mapCategoryLink('Parks');
});
$('.galleries-button').click(function(){
load_map('Galleries');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$(this).removeClass('site-color-2-bk');
$(this).addClass('site-color-1-bk');
boxcontent=mapCategoryList('Galleries');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('galleries_image'); ?>');
mapCategoryLink('Galleries');
});
$('.all-button').click(function(){
load_map('All');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$(this).removeClass('site-color-2-bk');
$(this).addClass('site-color-1-bk');
boxcontent=mapCategoryList('All');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('all_image'); ?>');
mapCategoryLink('All');
});
function defaultMap(){
load_map('Dining');
$('.map-categories-holder div').removeClass('site-black-bk');
$('.map-categories-holder > div').addClass('site-color-2-bk');
$('.dining-button').removeClass('site-color-2-bk');
$('.dining-button').addClass('site-color-1-bk');
boxcontent=mapCategoryList('Dining');
$(".map-info-inner-top").addClass("myfadein");
$(".myfadein").one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
$(".map-info-inner-top").removeClass("myfadein");
});
$(".map-info-inner-top").html(boxcontent);
displayMapWindow('','<?php echo get_field('dining_image'); ?>',1);
mapCategoryLink('Dining');
}
defaultMap();
thewidth=$("#map_canvas").width();
$("#map_canvas").css({"min-height":thewidth/2});
if ($(".query-check").css("order") >= "5" ){
thewidth=$("#map_canvas").width();
$("#map_canvas").css({"min-height":thewidth*1.2});
}
$(window).resize(function() {
thewidth=$("#map_canvas").width();
$("#map_canvas").css({"min-height":thewidth/2});
if ($(".query-check").css("order") >= "5" ){
thewidth=$("#map_canvas").width();
$("#map_canvas").css({"min-height":thewidth*1.2});
}
});
</script>
<?php wp_reset_query(); ?>
