JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="http://creativepreviews.com/fiddle/study/20131218/css/bootstrap.min.css">
<link rel="stylesheet" href="http://creativepreviews.com/fiddle/study/20131218/css/main.css">
<script src="http://creativepreviews.com/fiddle/study/20131218/js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD8-Dq2LTC-aCFcdKKjMA9aPuJHsJVICxc&amp;sensor=false"></script>
<body>
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-5">
                    <div class="main-box">
                        <ul class="nav nav-tabs" id="myTab">
                            <li class="active"><a id="link1" href="#office" data-toggle="tab">Tab 1</a>

                            </li>
                            <li><a id="link2" href="#rnd" data-toggle="tab">Tab 2</a>

                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="office">
                                 <h1>Contact 1</h1>

                                 <h4>Address 1</h4>

                            </div>
                            <div class="tab-pane" id="rnd">
                                 <h1>Contact 2</h1>

                                 <h4>Address 2</h4>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="map_canvas" style="height:250px; border: thin solid black;"></div>
</body>

CSS

.main {
    margin-top: 40px;
}
.main-box {
    background-color: #fff;
    margin: 15px 0;
}
.main-box h1, .main-box h4 {
    font-weight: 700;
    text-transform: uppercase;
}
.main-box h1 {
    color: #c086da;
}
.main-box a {
    color: #5a5a5a;
}
.main-box a:hover {
    color: #aaaaaa;
    text-decoration: none;
}
.main-box strong {
    font-size: 14px;
    font-weight: normal;
}
.nav-tabs {
    border-bottom: none;
}
.nav-tabs>li {
}
.nav-tabs>li>a {
    border: none;
    border-radius: 0;
    background-color: #eee;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.nav-tabs>li>a:hover {
    background-color: #8845a6;
    color: #fff;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    border: none;
    background-color: #8845a6;
    color: #fff;
}

/* Media Queries */
 @media (min-width: 768px) {
    .wrap {
        position: fixed;
        top: 50%;
        left: 50%;
        bottom: 40px;
        padding-bottom: 140px;
    }
    .main-menu {
        width: 750px;
        height: 200px;
        margin-left: -375px;
        margin-top: -100px;
        color: #fff;
    }
    .main-menu h1 {
        border: 2px solid #fff;
        width: 250px;
        font-size: 90px;
        padding: 20px;
        margin: 0;
        -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
        filter: alpha(opacity=90);
        -moz-opacity: 0.9;
        -khtml-opacity: 0.9;
        opacity: 0.9;
    }
    .main-menu h1:hover {
        background-color: #fff;
        color: #333333;
    }
    .main-menu > div {
        overflow: hidden;
        width: 250px;
        height: 143px;
        float: left;
        border-bottom: 0;
        padding: 0;
        margin-right: -1px;
        text-align: center;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
       ...

JavaScript

var marker;
var map;
$("#link1").click(function(){
    changeMarkerPos(3.165759, 101.611416);
});

$("#link2").click(function(){
    changeMarkerPos(3.165559, 101.612416);
});
function initialize() {

    var styles = [{
        stylers: [{
            saturation: -100
        }]
    }];

    var styledMap = new google.maps.StyledMapType(styles, {
        name: "Styled Map"
    });

    var mapProp = {
        center: new google.maps.LatLng(3.165659, 101.611416),
        zoom: 17,
        panControl: true,
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: true,
        streetViewControl: false,
        overviewMapControl: false,
        rotateControl: true,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style')

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(3.167244, 101.612950),
        animation: google.maps.Animation.DROP,
        icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Outside-Pink.png',
    });

    marker.setMap(map);
    map.panTo(marker.position);

    google.maps.event.addListener(marker, "click", function () {
      alert('hello');
    });
    $()
}

function changeMarkerPos(lat, lon){
    myLatLng = new google.maps.LatLng(lat, lon)
    marker.setPosition(myLatLng);
    map.panTo(myLatLng);
}

google.maps.event.addDomListener(window, 'load', initialize);