<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Maps Demo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi?key=ABQIAAAAyxeu8JwbgrekKUEdhxe4EBTWx8njL9qYLnq46LoOVGM6mIGTuxQWuJ3Va3yaItAmIEsT4jgllHk5Ig" type="text/javascript"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<style type="text/css" media="screen">
html { height: 100%; background-color: #000; overflow: hidden; }
body { height: 100%; background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
a:link, a:visited, a:hover { color: gray; }
#doc3 { height: 100%; padding:0; margin: 0; }
#bd { height: 100%;}
.container { height: 60%; }
.map { height: 100%; }
#map_canvas { height: 100%; }
.content { overflow-y: auto; height: 40%; }
</style>
</head>
<body>
<div id="doc3" class="yui-t7">
<div id="bd">
<div class="yui-gf container">
<div class="yui-u first">
<ul>
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a></li>
<li><a href="#baz">baz</a></li>
<li><a href="#spam">spam</a></li>
<li><a href="#eggs">eggs</a></li>
</ul>
</div>
<div class="yui-u map">
<div id="map_canvas"></div>
</div>
</div>
<div class="yui-g content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia diam quis ipsum iaculis blandit. In mattis nibh ac velit congue a vehicula erat facilisis. Nam imperdiet nulla id tellus commodo et cursus urna aliquam. Donec vestibulum, eros ac rhoncus sodales, mi lacus elementum turpis, quis varius augue orci eget est. In vel vehicula erat. Aliquam eu orci lorem. Nullam a nisi adipiscing purus imperdiet convallis vitae varius elit. Mauris eu hendrerit eros. Sed at nunc sit amet sapien bibendum varius et eu augue. Nulla nisi est, bibendum id interdum vitae, fringilla eu mi. In et dolor est, quis rutrum enim. Vivamus quam nulla, euismod in elementum at, pulvinar nec est. Praesent tincidunt venenatis libero vitae interdum. Nam mattis molestie ligula, et laoreet risus eleifend eu.
Proin sodales lacus quis sem congue venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dictum enim a nibh pharetra venenatis. Cras lacinia nibh in eros malesuada id rhoncus erat mattis. Mauris urna ipsum, vulputate nec malesuada ut, volutpat vel magna. Duis blandit, dolor quis convallis faucibus, orci arcu vulputate nulla, a ullamcorper ligula risus eu mi. Quisque magna mauris, molestie id luctus id, aliquam vitae leo. Proin ut ligula et lacus iaculis sollicitudin. Fusce blandit consectetur nisi at cursus. Donec tincidunt sem et justo dapibus eu facilisis nunc laoreet. Quisque nibh urna, convallis ac ullamcorper in, dapibus et arcu. Nullam vel posuere nulla. Maecenas sed erat quam, placerat imperdiet metus.
Vivamus scelerisque, metus vitae venenatis pulvinar, ante libero auctor nisi, id malesuada orci tellus mattis nunc. Cras pretium sem nec est suscipit dictum. Etiam viverra fermentum augue, a gravida velit facilisis sed. Cras quis velit tortor, sit amet pellentesque leo. Mauris ligula nisi, tincidunt at faucibus a, aliquam vel elit. Etiam fringilla diam nisl, faucibus vestibulum justo. Aliquam erat volutpat. Sed diam diam, sodales eget mattis varius, vehicula at ipsum. Suspendisse semper blandit neque, vel bibendum dolor tincidunt at. Sed eleifend mollis metus vitae vehicula. Proin in augue vitae velit auctor vulputate. Sed auctor dictum blandit. Sed diam mi, aliquet vitae tempus sed, pharetra vel felis. Praesent tincidunt ipsum faucibus odio scelerisque quis lobortis odio facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</div>
</div>
</div>
<script>
function mapsLoaded() {
var map = new google.maps.Map2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
map.enableContinuousZoom();
var geocoder = new GClientGeocoder();
geocoder.getLatLng('Dubai', function(latLng){
map.setCenter(latLng, 7);
for (var i = 0; i < 4; i++) {
after(3 * i, function(){map.zoomIn(null, null, true)});
}
});
}
function after(seconds, fn) {
setTimeout(fn, seconds * 1000);
}
function loadMaps() {
google.load("maps", "2", {"callback" : mapsLoaded});
google.load("jquery", "1.3");
}
loadMaps();
</script>
</body>
</html>
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |