質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.09%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,697

soony

score 31

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

よろしくお願いします。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>GoogleMap 2個表示</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>


<div id="container">
    <header>
        <h1>ACCESS<small>アクセス</small></h1>
    </header>

    <div id="map"></div>

    <div class="btn-container">
        <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">
            大きい地図で見る
            <i class="fa fa-external-link"></i>
        </a>
    </div>

    <footer>
        <div class="copy">
            <p>&copy; hoge inc.</p>
        </div>
    </footer>
</div>


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&v=3.9"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
* {
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Open Sans', sans-serif;
    background: #fafafa;
}
a{
    text-decoration: none;
}
h1{
    margin: 35px 0;
    letter-spacing: .1em;
}
h1 small{
    display: block;
    font-size: 16px;
}

#container{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 12px;
    box-sizing: border-box;
}

#map {
    width: 100%;
    height: 360px;
}

.copy{
    border-top: 1px solid #000;
    padding: 20px 0;
    text-align: center;
}

.btn-container{
    text-align: right;
    margin: 10px 0 100px;
}
.btn{
    display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #000;
    border: 1px solid #000;
    transition-property: color,background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}
.btn:hover{
    background-color: #000;
    color: #fafafa;
}
.btn .fa{
    vertical-align: middle;
    margin: -1px 1px 0;
}

.info{
    width: 300px;
}
.info-title{
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px;
}
.info-detail{
    line-height: 1.7;
    margin: 0 0 5px;
}
.info-footer{
    float: right;
}
;(function(){

    var LATITUDE = 16.774334;     // 緯度 6
    var LONGITUDE = 96.1676;     // 経度 4
    var $map = document.getElementById('map');

    // Googleマップの表示
    var map = new google.maps.Map($map,{
        center: new google.maps.LatLng(LATITUDE,LONGITUDE), // 地図の中心点
        mapTypeId: google.maps.MapTypeId.ROADMAP,           // 地図の表示タイプ
        zoom: 18                                            // 地図のズームレベル
    });

    // カスタムマップタイプを設定
    var myStyledMapType = new google.maps.StyledMapType(
        [
            {
                "stylers": [
                    {"hue": "#ff1a00"},
                    {"invert_lightness": true},
                    {"saturation": -100},
                    {"lightness": 33},
                    {"gamma": 0.5}
                ]
            },
            {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": [
                    {"color": "#2D333C"}
                ]
            }
        ]
    );
    // カスタムマップタイプの登録
    map.mapTypes.set('myMapType', myStyledMapType);
    map.setMapTypeId('myMapType');

    // Googleマップにマーカーを設置
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(LATITUDE,LONGITUDE),   // マーカーを立てる位置
        map: map    // マーカーを表示させるGoogleマップオブジェクトを指定
    });

    // 情報ウィンドウを生成する
    var template = document.getElementById('infoWindowTemplate');
    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent(template.innerText);
    // マーカーをクリックで情報ウィンドウを表示を表示させる
    google.maps.event.addListener(marker, 'click', function(){
        infoWindow.open(map, marker);
    });
})();
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/24 23:11

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

    キャンセル

  • soony

    2016/08/24 23:19

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

    キャンセル

回答 2

checkベストアンサー

+1

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

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

【1ページに複数のGoogle mapを表示 - Qiita】
http://qiita.com/achamaru/items/8d0b4de8f36d8b0540fd

【Google Map API V3 1ページに複数マップを表示する(レスポンシブで)】
http://www.radia.jp/google-map-api-v3-map-plural/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/25 02:41

    idがことなるdiv要素に変数を入れることによってマップを二個生成することが出来ました。ありがとうございます!

    キャンセル

+1

<!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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/25 02:42

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる