HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<section class="section" id="map-tour">
<div id="map"></div>
<div id="map-description">
<div></div>
</div>
<div id="map-nav" class="nav-container">
<div id="map-controls">
<div id="info-toggle">
<span class="lsu-icon lsu-info"></span>
</div>
<div id="map-toggle">
<span></span>
</div>
<div id="tracking-toggle">
<span class="lsu-icon lsu-phone"></span>
</div>
</li>
</ul>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide" id="hallChampions">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE1sMTFfcVRYc1VQNmtpNlZjV0FhbDBCZV9RV2dUSnR6ZlE3Qm01&fov=90&heading=85&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Hall of Champions
</div>
<div class="swiper-slide" id="auditorium">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE54V1lqa2EyVzRQZElhZnFERkdhcE94OUtBelMtVHQ4WjdPcl93&fov=180&heading=100&pitch=-20&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Bo Campbell Auditorium
</div>
<div class="swiper-slide" id="academicFame">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE9jcHdaeGJvTjdHRzEyZUFGTHd5dDVkTklQeWNaT2VmdDdnanNW&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Academic Hall of Fame
</div>
<div class="swiper-slide" id="excellenceCenter">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE1pamdfaUczVjdjQUpzWXEteU42VF9BY0t4UUxqOWtvUW0ydkM5&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Academic Center for Excellence
</div>
<div class="swiper-slide" id="mainOffice">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE5hS2tfc2FhTno2SjUwMWpUR0xtY0k4VHNzd1pTX2ZTTXpuRkRm&fov=90&heading=30&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Main Office
</div>
<div class="swiper-slide" id="studentCenter">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE1TRzUwcHB3MEpzVW5KVi1VWWt2U0Noc0J2RkYtTlNHNnpMSW9L&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Student Learning Center
</div>
<div class="swiper-slide" id="mediaRoom">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE56TWhjWUM2cFNVUXQ2MVJISHpCbVBpYk0xeWhsZHZNWXBHYU53&fov=90&heading=90&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Media Training Room
</div>
<div class="swiper-slide" id="computerLab">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE5acVNyYU5hX3RGLVV4Mm90cFdLSGtXbllRamdSeGttWngybzNX&fov=90&heading=340&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Computer Lab
</div>
<div class="swiper-slide" id="library">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE04VnZ0bk96Znk5SDhyS1FDOWpmLWhfbkFXNEd2dEpYTmYtN3N2&fov=90&heading=235&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
CCACSA Library
</div>
<div class="swiper-slide" id="tutCenter">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE9oWTJ4eFo0ZmYxVDFad1FIc1RObEFncmRHaFh0VnZaQ2Q4dXJj&fov=90&heading=0&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
Tutorial Center
</div>
<div class="swiper-slide" id="fuelCenter">
<div class="bg-image" style="background-image:url(https://maps.googleapis.com/maps/api/streetview?size=400x400&pano=CAoSLEFGMVFpcE9mUjlMQWUta1pnVGx6SWlfYmtqYldZeEl5VHR5TzRzWTVyN3dD&fov=90&heading=56&pitch=10&key=AIzaSyBhaX2NYqvU6RDu7ZyeBwXmTm4Zj6SH_ak);"></div>
E.D.G.E Fuel Center
</div>
</div>
</div>
</section>
#map-tour {
height:100vh;
width:100%;
position: relative;
overflow: hidden;
}
#map,
#street-view {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-nav {
background: #fff;
position:absolute;
bottom: 0;
left: 0;
z-index: 999;
color: #fff;
height: 30vh;
width: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-transition: 1s ease;
transition: 1s ease;
-webkit-transform: translate3d(0,30%,0);
transform: translate3d(0,30%,0);
}
#map-nav.opened {
opacity: 1;
z-index: 998;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.nav-list-header {
color: #fdd023;
text-transform: uppercase;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
font-size: 2vw;
letter-spacing: .25vw;
}
#map-nav li {
display: inline-block;
padding-right: 15px;
padding-left: 15px;
font-size: 1vw;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
letter-spacing: 1px;
text-align: center;
}
#map-nav li:hover {
cursor: pointer;
}
#map-controls {
position:absolute;
bottom: 99%;
width: 100%;
z-index: 999;
color: #fff;
text-align: center;
}
#map-toggle {
position: absolute;
left: 5px;
bottom: 0;
font-size: 1.25em;
line-height: 1;
}
#map-toggle span:before {
content: '\25b2';
position: relative;
color: rebeccapurple;
background: #fff;
padding: 5px 30px 5px 30px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#map-nav.opened #map-toggle span:before {
content: '\25bc';
}
#info-toggle {
position: absolute;
bottom: 10px;
right: 15px;
padding: 5px;
}
#tracking-toggle {
display: none;
}
#info-toggle .lsu-icon:before,
#tracking-toggle .lsu-icon:before {
background: #fff;
padding: 2px;
color: #461d7c;
border-radius: 50%;
font-size: 2em;
}
html.ios #map-toggle .lsu-icon:before {
padding: 15px;
font-size: 6em;
}
html.ios #tracking-toggle,
html.android #tracking-toggle {
display: block;
}
#map-description {
position:absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
color: #fff;
z-index: 11;
background: rgba(0,0,0,0.5);
-webkit-transition: 1s ease;
transition: 1s ease;
z-index: -1;
}
#map-description.active {
opacity: 1;
z-index: 998;
-webkit-transition: 1s ease;
transition: 1s ease;
background: rgba(0,0,0,0.6);
}
#map-description > div {
position: relative;
height: 100%;
width: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-direction: column;
flex-direction: column;
transition: 1s ease;
font-size: 4vw;
color: #fff;
line-height: 1.5;
letter-spacing: .1vw;
margin: auto;
padding: 10vw;
}
.nav-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
}
.swiper-slide {
background-size: cover;
background-position: center;
height: 100%;
width: 33%;
box-sizing: border-box;
padding: 10px 0;
position: relative;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-direction: column;
flex-direction: column;
font-size: 1.5vw;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
letter-spacing: 1px;
}
.bg-image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
z-index: -1;
}
.bg-image:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: -1;
}
@media(min-width: 768px) {
#map-controls {
bottom: 99%;
}
#map-toggle .lsu-icon:before {
font-size: 2.5em;
}
#info-toggle .lsu-icon:before,
#tracking-toggle .lsu-icon:before {
font-size: 2.5em;
}
#map-description > div {
font-size: 3vw;
}
.swiper-slide {
width: 23%;
}
}
@media(min-width:1200px) {
#map-description > div {
font-size: 24px;
max-width: 1100px;
padding: 15px;
}
}
var panos = {
"hallChampions": "CAoSLEFGMVFpcE1sMTFfcVRYc1VQNmtpNlZjV0FhbDBCZV9RV2dUSnR6ZlE3Qm01",
"auditorium": "CAoSLEFGMVFpcE54V1lqa2EyVzRQZElhZnFERkdhcE94OUtBelMtVHQ4WjdPcl93",
"academicFame": "CAoSLEFGMVFpcE9jcHdaeGJvTjdHRzEyZUFGTHd5dDVkTklQeWNaT2VmdDdnanNW",
"studentCenter": "CAoSLEFGMVFpcE1TRzUwcHB3MEpzVW5KVi1VWWt2U0Noc0J2RkYtTlNHNnpMSW9L",
"mainOffice": "CAoSLEFGMVFpcE5hS2tfc2FhTno2SjUwMWpUR0xtY0k4VHNzd1pTX2ZTTXpuRkRm",
"excellenceCenter": "CAoSLEFGMVFpcE1pamdfaUczVjdjQUpzWXEteU42VF9BY0t4UUxqOWtvUW0ydkM5",
"mediaRoom": "CAoSLEFGMVFpcE56TWhjWUM2cFNVUXQ2MVJISHpCbVBpYk0xeWhsZHZNWXBHYU53",
"computerLab": "CAoSLEFGMVFpcE5acVNyYU5hX3RGLVV4Mm90cFdLSGtXbllRamdSeGttWngybzNX",
"library": "CAoSLEFGMVFpcE04VnZ0bk96Znk5SDhyS1FDOWpmLWhfbkFXNEd2dEpYTmYtN3N2",
"tutCenter": "CAoSLEFGMVFpcE9oWTJ4eFo0ZmYxVDFad1FIc1RObEFncmRHaFh0VnZaQ2Q4dXJj",
"fuelCenter": "CAoSLEFGMVFpcE0wSk5yYWdrYnByMlZzdDF3SGpLdXRzMXNKVDU5STFwc0p0Z1VL",
}
var headings = {
"hallChampions": {
heading: 85,
pitch: 5,
zoom: 1
},
"auditorium": {
heading: 85,
pitch: -20,
zoom: 1
},
"academicFame": {
heading: 250,
pitch: 5,
zoom: 0
},
"studentCenter": {
heading: 90,
pitch: 0,
zoom: 0
},
"mainOffice": {
heading: 30,
pitch: 0,
zoom: 0
},
"excellenceCenter": {
heading: 220,
pitch: 0,
zoom: 0
},
"confRoom": {
heading: 0,
pitch: 0,
zoom: 0
},
"champsOffice": {
heading: 150,
pitch: 0,
zoom: 0
},
"mediaRoom": {
heading: 90,
pitch: 0,
zoom: 0
},
"computerLab": {
heading: 340,
pitch: -10,
zoom: 0
},
"library": {
heading: 250,
pitch: 0,
zoom: 0
},
"tutCenter": {
heading: 0,
pitch: 0,
zoom: 0
},
"fuelCenter": {
heading: 56,
pitch: 0,
zoom: 0
},
}
var descriptions = {
"hallChampions": "This inspiring hallway serves as a shrine to the athletic accomplishments of our student-athletes and is located on the South side of the Southeast entrance of the building.",
"auditorium": "On the first floor on either side of the hallways are enormous wooden doors that open up to the largest auditorium on our campus. With the capacity to seat over 1,000 people, Bo Campbell Auditorium is used for classes, conventions, conferences, test taking, athletic meetings, student-athlete seminars, tutoring/GA meetings and more.",
"academicFame": "Mirroring the Hall of Champions, this hallway recognizes the academic successes of our student-athletes. The goal of student-athletes is more than just being able to succeed in competition, but also to excel in the classroom.",
"studentCenter": "The Center houses four learning specialists, and a room for both private and group work. The learning specialist help assists our student-athletes by teaching academic skills and strategies.",
"mainOffice": "In between the Hall of Champions and the Academic Hall of Fame is an office space where nine staff members (Academic Advisors, Life-Skills Manager, Information Technology Manager, and Assistant Vice Chancellor and Executive Director) are located. This is where our student-athletes have their academic advising meetings, schedule appointments and receive administrative help.",
"excellenceCenter": "Walking past the Academic Hall of Fame and the wooden doors of Bo Campbell Auditorium is our Academic Center for Excellence. This area includes a computer lab, work study space, and two academic advisors’ offices.",
"mediaRoom": "This is a place where our student-athletes participate in media etiquette, public speaking, and interviewing skills.",
"computerLab": "Our state of the art lab includes 52 desktop computers, 12 study rooms, two printers, and framed names of our Academic Honor Roll student-athletes. ",
"library": "Although the normal word “library” would house books, our library consists of large tables and chairs. The library is decorated with memorable moments and murals of student-athletes in the classroom, community, graduation and competition.",
"tutCenter": "Our newly renovated tutorial center is where our tutoring appointments occur. There are 20 rooms in total, each with chairs, tables, smartboards or thirty-nine inch monitors, and desktop computers for our student-athletes and their tutors to use. There are approximately 1100-1300 tutoring appointments per week. Some appointments are one on one and others are in group settings.",
"fuelCenter": "In our recently added fueling center there are many healthy snacks and meals available to our student-athletes. Although fueling stations are around campus for student-athletes, having one in our Academic Center helps them stay fueled and focused for excellence.",
}
var mapdesc = $('#map-description > div');
function updateDescription(info){
mapdesc.text(info);
}
var nav = document.querySelector("#map-nav");
var mapToggle = document.querySelector("#map-toggle");
var mapControls = document.querySelector("#map-controls");
var infoToggle = document.querySelector("#info-toggle");
var mapdescWrapper = $('#map-description');
var swiper = new Swiper('.nav-container', {
spaceBetween: 10,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
keyboardControl: true,
});
var tlNav = new TimelineMax({
paused: true,
reversed: true
});
tlNav.to(nav, .15, {
className: "+=opened"
});
tlNav.to(document.body, .1, {
className: "+=nav-active"
});
tlNav.staggerTo("#map-nav>ul>li", .1, {
opacity: 1,
y: 0,
ease: Back.easeOut
}, .075);
mapToggle.onclick = function() {
tlNav.reversed() ? tlNav.play() : tlNav.reverse();
};
function toggleMenu(){
tlNav.reversed() ? tlNav.play() : tlNav.reverse();
}
var tlInfo= new TimelineMax({
paused: true,
reversed: true
});
tlInfo.to(mapdescWrapper, .0009, {
className: "+=active"
});
infoToggle.onclick = function() {
tlInfo.reversed() ? tlInfo.play() : tlInfo.reverse();
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
pano: 'CAoSLEFGMVFpcE1sMTFfcVRYc1VQNmtpNlZjV0FhbDBCZV9RV2dUSnR6ZlE3Qm01',
pov: {
heading: 85,
pitch: 0
},
zoom: 0,
fullscreenControl: false,
motionTracking: true,
motionTrackingControl: true,
disableDefaultUI: !0,
linksControl: false,
panControl: false,
enableCloseButton: false,
});
mapdesc.text(descriptions.hallChampions);
console.dir(panorama);
$('#tracking-toggle').click(function() {
panorama.getMotionTracking() ? panorama.setMotionTracking(false) : panorama.setMotionTracking(true);
});
$('#hallChampions').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE1sMTFfcVRYc1VQNmtpNlZjV0FhbDBCZV9RV2dUSnR6ZlE3Qm01');
panorama.setPov(headings.hallChampions);
mapdesc.text(descriptions.hallChampions);
});
$('#auditorium').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE54V1lqa2EyVzRQZElhZnFERkdhcE94OUtBelMtVHQ4WjdPcl93');
panorama.setPov(headings.auditorium);
mapdesc.text(descriptions.auditorium);
});
$('#academicFame').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE9jcHdaeGJvTjdHRzEyZUFGTHd5dDVkTklQeWNaT2VmdDdnanNW');
panorama.setPov(headings.academicFame);
mapdesc.text(descriptions.academicFame);
});
$('#studentCenter').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE1TRzUwcHB3MEpzVW5KVi1VWWt2U0Noc0J2RkYtTlNHNnpMSW9L');
panorama.setPov(headings.studentCenter);
mapdesc.text(descriptions.studentCenter);
});
$('#mainOffice').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE5hS2tfc2FhTno2SjUwMWpUR0xtY0k4VHNzd1pTX2ZTTXpuRkRm');
panorama.setPov(headings.mainOffice);
mapdesc.text(descriptions.mainOffice);
});
$('#excellenceCenter').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE1pamdfaUczVjdjQUpzWXEteU42VF9BY0t4UUxqOWtvUW0ydkM5');
panorama.setPov(headings.excellenceCenter);
mapdesc.text(descriptions.excellenceCenter);
});
$('#mediaRoom').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE56TWhjWUM2cFNVUXQ2MVJISHpCbVBpYk0xeWhsZHZNWXBHYU53');
panorama.setPov(headings.mediaRoom);
mapdesc.text(descriptions.mediaRoom);
});
$('#computerLab').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE5acVNyYU5hX3RGLVV4Mm90cFdLSGtXbllRamdSeGttWngybzNX');
panorama.setPov(headings.computerLab);
mapdesc.text(descriptions.computerLab);
});
$('#library').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE04VnZ0bk96Znk5SDhyS1FDOWpmLWhfbkFXNEd2dEpYTmYtN3N2');
panorama.setPov(headings.library);
mapdesc.text(descriptions.library);
});
$('#tutCenter').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE9oWTJ4eFo0ZmYxVDFad1FIc1RObEFncmRHaFh0VnZaQ2Q4dXJj');
panorama.setPov(headings.tutCenter);
mapdesc.text(descriptions.tutCenter);
});
$('#fuelCenter').click(function() {
toggleMenu();
panorama.setPano('CAoSLEFGMVFpcE0wSk5yYWdrYnByMlZzdDF3SGpLdXRzMXNKVDU5STFwc0p0Z1VL');
panorama.setPov(headings.fuelCenter);
mapdesc.text(descriptions.fuelCenter);
});
Also see: Tab Triggers