v3

so far.

by witold

HTML

<!DOCTYPE html>
<html lang="en">
    
    <head>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map_canvas2 {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>        
        

        <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700'
        rel='stylesheet' type='text/css'>
            
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
        type="text/javascript"></script>            
            
<!-- this breaks           <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>        -->
            
 <link rel="stylesheet" type="text/css" href="http://pollster.net/demo.css" />            
            <link rel="stylesheet" type="text/css" href="css/style4.css" />
            <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
           <!--[if lte IE 8]>
            <link rel="stylesheet" type="text/css" href="css/simple.css" />
        <![endif]-->
      <!-- this breaks.  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyBwlgQ1sX-Fk8agu-5nSEOKyq8GTfASYHM"
        type="text/javascript"></script>            -->
            
        <script>
            var map;
            var map2;


            // for routes map //
            var map3, path = [],
                service = new google.maps.DirectionsService(),
                shiftPressed = false,
                poly,
                formkey = "dDN6WEJTMlNHT2VNMlZBOW1MZmI1Wnc6MQ",
                inputId = "entry_1";

   ...

CSS

.st-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family:'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
.st-container > input, .st-container > a {
    position: fixed;
    bottom: 0px;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
}
.st-container > input {
    opacity: 0;
    z-index: 1000;
}
.st-container > a {
    z-index: 10;
    font-weight: 700;
    background: #333333;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151, 24, 64, 0.2);
}
/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
 .st-container:before {
    content:'';
    position: fixed;
    width: 100%;
    height: 34px;
    background: #333333;
    z-index: 9;
    bottom: 0;
}
#st-control-1, #st-control-1 + a {
    left: 0;
}
#st-control-2, #st-control-2 + a {
    left: 20%;
}
#st-control-3, #st-control-3 + a {
    left: 40%;
}
#st-control-4, #st-control-4 + a {
    left: 60%;
}
#st-control-5, #st-control-5 + a {
    left: 80%;
}
.st-container > input:checked + a, .st-container > input:checked:hover + a {
    background: #C22929;
}
.st-container > input:checked + a:after, .st-container > input:checked:hover + a:after {
    bottom: 100%;
    border: solid transparent;
    content:'';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #C22929;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}
.st-container > input:hover + a {
    background: #696666;
}
.st-container > input:hover + a:after {
    border-bottom-color: #8C7079;
}
.st-scroll, .st-panel {
    position: relative;
    width: 100%;
    height: 100%;
}
.st-scroll {
    top: 0;
    left: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition:...