<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->
<script type="text/javascript">
var map;
var center;
var myLatlng;
var lat, lng, button;
function initialize() {
var coordinates = document.getElementById("txtLatLng").value.split(/[,:]/);
console.log(coordinates);
myLatlng = new google.maps.LatLng(parseFloat(coordinates[0]), parseFloat(coordinates[1]));
console.log(myLatlng);
latEl = document.getElementById('latitude');
lngEl = document.getElementById('longitude');
button = document.getElementById('setMarker');
google.maps.event.addDomListener(button, 'click', setMarker);
var mapOptions = {
zoom: 12,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
function setMarker() {
var latitude = latEl.value;
var longitude = lngEl.value;
if (latitude == '' || longitude == '') {
console.log('lat or lng not defined');
return;
}
var position = new google.maps.LatLng(parseFloat(latitude),
parseFloat(longitude));
var marker = new google.maps.Marker({
position: position,
map: map
});
map.setCenter(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="map_canvas">
</div>
<!-- tabs -->
<div class="tabbable tabs-bottom">
<div class="tab-content" >
<div class="tab-pane active" id="sendai">
<div class="jumbotron">
<div class="details-container col-md-4">
<h2>本社</h2>
<p>〒980-0811</p>
<p>仙台市青葉区一番町1-8-3 富士火災仙台ビル7F</p>
<p>TEL：022-224-7625</p>
<p>FAX：022-224-7627</p>
</div>
<div class="map-area col-md-6">
</div>
</div>
</div>
<div class="tab-pane" id="philippines">
<div class="jumbotron">
<div class="details-container col-md-4">
<h2>Philippines</h2>
<p>Philippines</p>
<p>it park</p>
<p>TEL：022-224-7625</p>
<p>FAX：022-224-7627</p>
</div>
<div class="map-area col-md-6">
</div>
</div>
</div>
<div class="tab-pane" id="services">
<div class="jumbotron">
<h1>Services Tab</h1>
<p>meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have.</p>
</div>
</div>
<div class="tab-pane" id="contact">
<div class="jumbotron">
<h1>Contact Tab</h1>
<p>deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors..</p>
</div>
</div>
</div></div>
</div>
<!-- tab content -->
<ul class="nav nav-tabs">
<li class="active">
<a href="#sendai" data-toggle="tab" onlick="setMarker()">
Sendai
<input type='button' id='setMarker' value='Set Marker' />
<div class="hidden">
</div>
</a>
</li>
<li>
<a href="#philippines" data-toggle="tab" onlick="setMarker()">
Philippines
<input type='button' id='setMarker' value='Set Marker' />
<div class="">
<input type='text' id='txtLatLng' value='38.25718 : 140.8740783' />
<input type='text' id='latitude' value='38.25718' />
<input type='text' id='longitude' value='140.8740783' />
</div>
</a>
</li>
<li><a href="#services" data-toggle="tab">Services</a></li>
<li><a href="#contact" data-toggle="tab">Contact</a></li>
</ul>
</div>
<!-- /tabs -->
</div>
</div>
<div >
</div>
</body>
</html>
/* custom inclusion of right, left and below tabs */
.tabs-below > .nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-bottom > .nav-tabs {
border-top: 1px solid #ddd;
}
.tabs-bottom > .nav-tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.tabs-bottom > .nav-tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
border-top-color: #ddd;
border-bottom-color: transparent;
}
.tabs-bottom > .nav-tabs > .active > a,
.tabs-bottom > .nav-tabs > .active > a:hover,
.tabs-bottom > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
.hidden {
visibility: hidden;
}
.col-md-4 {
clear: both !important;
float: none !important;
}
#map_canvas {
height: 300px !important;
width: 100% !important;
}
.tab-content {
background-color: #000;
width: 100%;
}
.jumbotron {
padding: 0px !important;
display: block;
}
.details-container {
background-color: #fff;
padding: 60px;
}
.tabbable.tabs-bottom {
margin-top: -340px;
}
.col-md-4 {
display: inline-block;
float: left;
width: 40% !importat;
}
.col-md-6 {
display: inline-block;
float: none;
width:50% !important;
}
