<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style type="text/css">
.maps{
height: 400px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 maps" data-lat="35.348504" data-lng="136.164551">
</div>
<div class="col-md-6 maps" data-lat="38.097546" data-lng="140.180298">
</div>
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&v=3.9"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
var maps = $('.maps');
maps.each(function (i, map) {
var lat = $(this).attr('data-lat');
var lng = $(this).attr('data-lng');
new google.maps.Map(map, {
center: new google.maps.LatLng(lat, lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 10
});
});
});
</script>
</body>
</html>
More than 5 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme