<?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'); 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; ?>", scaledSize: new google.maps.Size(40, 40), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(0,0), }; icon_b[<?php echo $i; ?>] = { url: "<?php echo $mapon; ?>", scaledSize: new google.maps.Size(40, 40), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(0,0), }; 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; ?>], }); 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>'}); google.maps.event.addListener(marker[<?php echo $i; ?>], 'click', function() { closeallwindows(category); marker[<?php echo $i; ?>].setIcon(icon_b[<?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); }); 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; ?>", scaledSize: new google.maps.Size(40, 40), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(0,0), }; marker[<?php echo $i; ?>].setIcon(mapicon[<?php echo $i; ?>]); infowindow[<?php echo $i; ?>].close(); } <?php $i++; ?> <?php endwhile; ?> <?php wp_reset_query(); ?> } } 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(); ?>