» Interactive Google Map Code

Interactive Google Map Code

<?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&amp"></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(); ?>
Go Back
Interactive Google Map Code

Thank You!

We will get back to you shortly
