カスタマイズしたGoogleMapを同じページに2個置きたいです。

下記のコードで、GoogoleMapを同じページ上に2つ置く方法が知りたいです。

<div id="container">〜<div>を複製しようとしましたが、片方のMAPだけ空白の表示になってしまします。JavaScriptで緯度などを指定しているので、そもそもJavaScriptのコードが2種類必要だと思うんですが、記述方法がわかりません。

よろしくお願いします。

html
1<!DOCTYPE html>
2<html>
3<head lang="ja">
4    <meta charset="UTF-8">
5    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6    <title>GoogleMap 2個表示</title>
7    <link rel="stylesheet" href="css/style.css"/>
8    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
10</head>
11<body>
12
13
14<div id="container">
15    <header>
16        <h1>ACCESS<small>アクセス</small></h1>
17    </header>
18
19    <div id="map"></div>
20
21    <div class="btn-container">
22        <a class="btn" target="_blank" href="https://www.google.co.jp/maps/place/KTZ+Ruby+Hill+Securities+Company+Limited/@16.7744006,96.1654695,17z/data=!4m5!3m4!1s0x0:0x46e56a91ce35a02e!8m2!3d16.7743962!4d96.1676632">
23            大きい地図で見る
24            <i class="fa fa-external-link"></i>
25        </a>
26    </div>
27
28    <footer>
29        <div class="copy">
30            <p>&copy; hoge inc.</p>
31        </div>
32    </footer>
33</div>
34
35
36<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&v=3.9"></script>
37<script type="text/javascript" src="js/script.js"></script>
38</body>
39</html>

css
1* {
2    margin: 0;
3    padding: 0;
4}
5body{
6    font-family: 'Open Sans', sans-serif;
7    background: #fafafa;
8}
9a{
10    text-decoration: none;
11}
12h1{
13    margin: 35px 0;
14    letter-spacing: .1em;
15}
16h1 small{
17    display: block;
18    font-size: 16px;
19}
20
21#container{
22    width: 100%;
23    max-width: 1000px;
24    margin: 0 auto;
25    padding: 0 12px;
26    box-sizing: border-box;
27}
28
29#map {
30    width: 100%;
31    height: 360px;
32}
33
34.copy{
35    border-top: 1px solid #000;
36    padding: 20px 0;
37    text-align: center;
38}
39
40.btn-container{
41    text-align: right;
42    margin: 10px 0 100px;
43}
44.btn{
45    display: inline-block;
46    width: 200px;
47    height: 40px;
48    line-height: 40px;
49    text-align: center;
50    color: #000;
51    border: 1px solid #000;
52    transition-property: color,background-color;
53    transition-duration: 0.3s;
54    transition-timing-function: ease;
55}
56.btn:hover{
57    background-color: #000;
58    color: #fafafa;
59}
60.btn .fa{
61    vertical-align: middle;
62    margin: -1px 1px 0;
63}
64
65.info{
66    width: 300px;
67}
68.info-title{
69    font-size: 16px;
70    font-weight: bold;
71    margin: 0 0 10px;
72}
73.info-detail{
74    line-height: 1.7;
75    margin: 0 0 5px;
76}
77.info-footer{
78    float: right;
79}

javascript
1;(function(){
2
3    var LATITUDE = 16.774334;     // 緯度 6
4    var LONGITUDE = 96.1676;     // 経度 4
5    var $map = document.getElementById('map');
6
7    // Googleマップの表示
8    var map = new google.maps.Map($map,{
9        center: new google.maps.LatLng(LATITUDE,LONGITUDE), // 地図の中心点
10        mapTypeId: google.maps.MapTypeId.ROADMAP,           // 地図の表示タイプ
11        zoom: 18                                            // 地図のズームレベル
12    });
13
14    // カスタムマップタイプを設定
15    var myStyledMapType = new google.maps.StyledMapType(
16        [
17            {
18                "stylers": [
19                    {"hue": "#ff1a00"},
20                    {"invert_lightness": true},
21                    {"saturation": -100},
22                    {"lightness": 33},
23                    {"gamma": 0.5}
24                ]
25            },
26            {
27                "featureType": "water",
28                "elementType": "geometry",
29                "stylers": [
30                    {"color": "#2D333C"}
31                ]
32            }
33        ]
34    );
35    // カスタムマップタイプの登録
36    map.mapTypes.set('myMapType', myStyledMapType);
37    map.setMapTypeId('myMapType');
38
39    // Googleマップにマーカーを設置
40    var marker = new google.maps.Marker({
41        position: new google.maps.LatLng(LATITUDE,LONGITUDE),   // マーカーを立てる位置
42        map: map    // マーカーを表示させるGoogleマップオブジェクトを指定
43    });
44
45    // 情報ウィンドウを生成する
46    var template = document.getElementById('infoWindowTemplate');
47    var infoWindow = new google.maps.InfoWindow();
48    infoWindow.setContent(template.innerText);
49    // マーカーをクリックで情報ウィンドウを表示を表示させる
50    google.maps.event.addListener(marker, 'click', function(){
51        infoWindow.open(map, marker);
52    });
53})();
54

kei344

2016/08/24 14:11

二個目を置く場所はどこでしょうか。また、情報ウィンドの中身は別物になるのでしょうか。

退会済みユーザー

2016/08/24 14:19

二個目はfooterの上に置きたいです。また中身は違った場所を表したいと思っています。

行動規範の内容に同意します

回答2件

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3    <head>
4		<title></title>
5		<meta charset="UTF-8">
6		<meta http-equiv="X-UA-Compatible" content="IE=edge">
7		<meta name="viewport" content="width=device-width, initial-scale=1">
8		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
9		<style type="text/css">
10			.maps{
11				height: 400px;
12				border: 1px solid #ccc;
13			}
14		</style>
15    </head>
16    <body>
17
18		<div class="container">
19			<div class="row">
20				<div class="col-md-6 maps" data-lat="35.348504" data-lng="136.164551">
21				</div>
22				<div class="col-md-6 maps" data-lat="38.097546" data-lng="140.180298">
23				</div>
24			</div>
25		</div>
26
27		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&v=3.9"></script>
28		<script src="//code.jquery.com/jquery.min.js"></script>
29		<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30		<script type="text/javascript">
31			$(function () {
32				var maps = $('.maps');
33				maps.each(function (i, map) {
34					var lat = $(this).attr('data-lat');
35					var lng = $(this).attr('data-lng');
36					new google.maps.Map(map, {
37						center: new google.maps.LatLng(lat, lng),
38						mapTypeId: google.maps.MapTypeId.ROADMAP,
39						zoom: 10
40					});
41				});
42			});
43		</script>
44    </body>
45</html>

投稿2016/08/24 16:36

退会済みユーザー

総合スコア0

退会済みユーザー

2016/08/24 17:42

回答いただきありがとうございました。こちらのコード、大変参考になりました。

行動規範の内容に同意します

ベストアンサー

極端に言えば変数mapとそれが入るdiv要素がそれぞれにあればよいだけです。

JavaScript
1// var map = new google.maps.Map( document.getElementById('map'),{/* 略 */} );
2// ↓
3   var map1 = new google.maps.Map( document.getElementById('map1'),{/* 略 */} );
4   var map2 = new google.maps.Map( document.getElementById('map2'),{/* 略 */} );