index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>Custom slider</title>
    <link rel="stylesheet" href="css/cs-slider.css"/>
</head>

<body>
<main id="main">

    <div id="cs-slider" class="cs-slider">
        <div class="cs-slider_progress"></div>
        <div class="cs-slider_handle">
            <span class="cs-slider_result"></span>
        </div>
    </div>

    <ul class="buttons-group">
        <li class="circle-wrap map-btn" data-places="places1">
            <div class="circle-btn">
                <span class="border-inactive"></span>
                <span class="border-active"></span>
                <span class="letter">Map1</span>
            </div>

        <li class="circle-wrap map-btn" data-places="places2">
            <div class="circle-btn">
                <span class="border-inactive"></span>
                <span class="border-active"></span>
                <span class="letter">Map2</span>
            </div>

        <li class="circle-wrap map-btn" data-places="places3">
            <div class="circle-btn">
                <span class="border-inactive"></span>
                <span class="border-active"></span>
                <span class="letter">Map3</span>
            </div>
    </ul>


    <div id="map-canvas"></div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCwREZHPCK2aZKfxJ_d3nOLDb2Sf1EHX8Y&sensor=true"></script>
    <script src="js/cs-slider.js"></script>
    <script src="js/app.js"></script>
</main>
</body>
</html>