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

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

ただいまの
回答率

88.58%

GoogleMapのHTML内のおける地図の複数表示について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 537

totogawa

score 18

 実現したいこと

任意に指定した地点のポイントの地図を複数表示させること。

 発生している問題

HTMLに複数の任意の地図だけを表示させようとしています。
(javascript内のpoint配列から参照)
この場合におけるpoint[0]だけの場合や、point[0]からスタートして連続(point[0],point[1],point[3]...といった具合)での複数表示はできました。しかし不連続の場合に表示ができません。
まだプログラミングを初めて間もないため、長いコードですがご了承ください。

 該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>google API test</title>
</head>
<body>
<p>テスト</p>

<script type="text/javascript" src="api-javascript-test.js">
</script>

<script type="text/javascript">
 document.write(point[0]);
 document.write(point[2]);
 document.write(point[5]);
 document.write(point[10]);
 document.write(point[12]);
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?
key=My-APIkey&callback=initMap">
</script>

</body>
</html>
function initMap(){
    //    JR東京駅
    var opts1 = {
            zoom: 15,
            center: new google.maps.LatLng(35.681661 , 139.767314),
    };
    var map1 = new google.maps.Map(document.getElementById("map1"), opts1);

    var mnum1 = new google.maps.LatLng(35.681661 , 139.767314);
    var marker1 = new google.maps.Marker({
        position: mnum1,
        map: map1
    });

    //    新国立競技場
    var opts2 = {
            zoom: 15,
            center: new google.maps.LatLng(35.678356 , 139.715482)
    };
    var map2 = new google.maps.Map(document.getElementById("map2"), opts2);

    var mnum2 = new google.maps.LatLng(35.678356 , 139.715482);
    var marker2 = new google.maps.Marker({
        position: mnum2,
        map: map2
    });

    //    東京体育館
    var opts3 = {
            zoom: 15,
            center: new google.maps.LatLng(35.67948 , 139.712092)
    };
    var map3 = new google.maps.Map(document.getElementById("map3"), opts3);

    var mnum3 = new google.maps.LatLng(35.67948 , 139.712092);
    var marker3 = new google.maps.Marker({
        position: mnum3,
        map: map3
    });

    //    国立代々木競技場
    var opts4 = {
            zoom: 15,
            center: new google.maps.LatLng(35.667868 , 139.700438)
    };
    var map4 = new google.maps.Map(document.getElementById("map4"), opts4);

    var mnum4 = new google.maps.LatLng(35.667868 , 139.700438);
    var marker4 = new google.maps.Marker({
        position: mnum4,
        map: map4
    });

    //    日本武道館
    var opts5 = {
            zoom: 15,
            center: new google.maps.LatLng(35.693475 , 139.75006)
    };
    var map5 = new google.maps.Map(document.getElementById("map5"), opts5);

    var mnum5 = new google.maps.LatLng(35.693475 , 139.75006);
    var marker5 = new google.maps.Marker({
        position: mnum5,
        map: map5
    });

    //    皇居外苑
    var opts6 = {
            zoom: 15,
            center: new google.maps.LatLng(35.678069 , 139.756024)
    };
    var map6 = new google.maps.Map(document.getElementById("map6"), opts6);

    var mnum6 = new google.maps.LatLng(35.678069 , 139.756024);
    var marker6 = new google.maps.Marker({
        position: mnum6,
        map: map6
    });

    //    東京国際フォーラム
    var opts7 = {
            zoom: 15,
            center: new google.maps.LatLng(35.676607 , 139.764287)
    };
    var map7 = new google.maps.Map(document.getElementById("map7"), opts7);

    var mnum7 = new google.maps.LatLng(35.676607 , 139.764287);
    var marker7 = new google.maps.Marker({
        position: mnum7,
        map: map7
    });

    //    両国国技館
    var opts8  = {
            zoom: 15,
            center: new google.maps.LatLng(35.697179 , 139.793362)
    };
    var map8 = new google.maps.Map(document.getElementById("map8"), opts8);

    var mnum8 = new google.maps.LatLng(35.697179 , 139.793362);
    var marker8 = new google.maps.Marker({
        position: mnum8,
        map: map8
    });

    //    馬事公苑
    var opts9 = {
            zoom: 15,
            center: new google.maps.LatLng(35.638671 , 139.632304)
    };
    var map9 = new google.maps.Map(document.getElementById("map9"), opts9);

    var mnum9 = new google.maps.LatLng(35.638671 , 139.632304);
    var marker9 = new google.maps.Marker({
        position: mnum9,
        map: map9
    });

    //    武蔵野の森総合スポーツプラザ
    var opts10 = {
            zoom: 15,
            center: new google.maps.LatLng(35.66518 , 139.525036)
    };
    var map10 = new google.maps.Map(document.getElementById("map10"), opts10);

    var mnum10 = new google.maps.LatLng(35.66518 , 139.525036);
    var marker10 = new google.maps.Marker({
        position: mnum10,
        map: map10
    });

    //    東京スタジアム(味の素スタジアム)
    var opts11 = {
            zoom: 15,
            center: new google.maps.LatLng(35.66518 , 139.525036)
    };
    var map11 = new google.maps.Map(document.getElementById("map11"), opts11);

    var mnum11 = new google.maps.LatLng(35.66518 , 139.525036);
    var marker11 = new google.maps.Marker({
        position: mnum11,
        map: map11
    });

    //    有明アリーナ
    var opts12  = {
            zoom: 15,
            center: new google.maps.LatLng(35.64359 , 139.794739)
    };
    var map12 = new google.maps.Map(document.getElementById("map12"), opts12);

    var mnum12 = new google.maps.LatLng(35.64359 , 139.794739);
    var marker12 = new google.maps.Marker({
        position: mnum12,
        map: map12
    });

    //    有明体操競技場
    var opts13 = {
            zoom: 15,
            center: new google.maps.LatLng(35.641683 , 139.792167)
    };
    var map13 = new google.maps.Map(document.getElementById("map13"), opts13);

    var mnum13 = new google.maps.LatLng(35.641683 , 139.792167);
    var marker13 = new google.maps.Marker({
        position: mnum13,
        map: map13
    });
}
var point = new Array
point = [
    '<div id="map1" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map2" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map3" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map4" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map5" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map6" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map7" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map8" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map9" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map10" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map11" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map12" style = "width: 500px ; height:300px"></div><br>',
    '<div id="map13" style = "width: 500px ; height:300px"></div><br>',
];

追記

「任意」について
今回は0,2,5,10,12番目のマップを表示させたい意図でHTMLは作りました。
最終的な目的として、ある処理を通してこの番号を生成。マップを表示していきたいと考えています。
数も番号を変則的になり、それに合わせてマップ表示をしていくことを最終目的としています。
感覚的には、javascript上ですべてのマップ表示に必要なコードを作成。HTMLでその中から適宜持ってきて表示させる
といったことをしていきたいと考えています。
言葉足らず点等ございましたら、ご遠慮なくご指摘お願いします。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Lhankor_Mhy

    2018/10/30 18:48

    initMap() のカッコが閉じていませんが、typoですか?

    キャンセル

  • totogawa

    2018/10/30 18:52

    ご指摘ありがとうございます。単純な記入ミスです。訂正しましたので、引き続き宜しくお願い致します。

    キャンセル

  • kei344

    2018/10/30 19:23

    「任意」とは。具体的にどのようなことをしたいのかを質問文に追記されることをお勧めします。

    キャンセル

  • totogawa

    2018/10/30 19:35

    ご指摘ありがとうございます。追記に説明を載せました。宜しくお願い致します。

    キャンセル

回答 2

checkベストアンサー

+2

ちょっと頭の中を整理しましょう。
まず、地図が書き出される<div>が先に表示されていなければ、
var map1 = new google.maps.Map(document.getElementById("map1"), opts1);
が、書き出す場所がないので、エラーになります。

また、複数の<div>の中から表示させたいものをdocument.write()で書くというアイデアのようですが、これも、上と同じ理由で、id=“map1”が歯抜けになっていたら、その部分でエラーになり、スクリプトが停止しています。

そのあたりを踏まえて、スクリプトを組み直してみましょう。
---追記 ---
APIが呼ばれた後、callback=initMapinitMap()を呼び出していますので、<div>の配列も、initMap()の中で宣言していると、タイミングがNGですね。

--- 追記 ---
if(document.getElementById("map1"))で、目的のidがあるかどうかをチェックできます。

下記の例ではdocument.writeはあまり必要性を感じないので省いています。
--追記-- この場合、document.writeを省いたので、api-javascript-test.jsの呼び出しは、API呼び出しよりも前であれば<head>の中でも<body>の中でも構いません。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>google API test</title>
  <style type="text/css">

  </style>

</head>
<body>
  <p>テスト</p>

  <div id="map1" style = "width: 500px ; height:300px"></div>
  <div id="map3" style = "width: 500px ; height:300px"></div>
  <div id="map5" style = "width: 500px ; height:300px"></div>


  <script type="text/javascript" src="api-javascript-test.js">
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=hoge&callback=initMap"></script>
</body>
</html>

api-javascript-test.js

function initMap(){
//    JR東京駅 map1
  if(document.getElementById("map1")){//id="map1" があれば 処理を通る
    var opts1 = {
      zoom: 15,
      center: new google.maps.LatLng(35.681661 , 139.767314),
    };
    var map1 = new google.maps.Map(document.getElementById("map1"), opts1);

    var mnum1 = new google.maps.LatLng(35.681661 , 139.767314);
    var marker1 = new google.maps.Marker({
      position: mnum1,
      map: map1
    });
  }
//    新国立競技場 map2
  if(document.getElementById("map2")){//id="map2" があれば 処理を通る
    var opts2 = {
      zoom: 15,
      center: new google.maps.LatLng(35.678356 , 139.715482)
    };
    var map2 = new google.maps.Map(document.getElementById("map2"), opts2);

    var mnum2 = new google.maps.LatLng(35.678356 , 139.715482);
    var marker2 = new google.maps.Marker({
      position: mnum2,
      map: map2
    });
  }
//    東京体育館 map3
  if(document.getElementById("map3")){//id="map3" があれば 処理を通る
    var opts3 = {
      zoom: 15,
      center: new google.maps.LatLng(35.67948 , 139.712092)
    };
    var map3 = new google.maps.Map(document.getElementById("map3"), opts3);

    var mnum3 = new google.maps.LatLng(35.67948 , 139.712092);
    var marker3 = new google.maps.Marker({
      position: mnum3,
      map: map3
    });
  }
//    国立代々木競技場
  if(document.getElementById("map4")){//id="map4" があれば 処理を通る
    var opts4 = {
      zoom: 15,
      center: new google.maps.LatLng(35.667868 , 139.700438)
    };
    var map4 = new google.maps.Map(document.getElementById("map4"), opts4);

    var mnum4 = new google.maps.LatLng(35.667868 , 139.700438);
    var marker4 = new google.maps.Marker({
      position: mnum4,
      map: map4
    });
  }

//    日本武道館
  if(document.getElementById("map5")){//id="map5" があれば 処理を通る
    var opts5 = {
      zoom: 15,
      center: new google.maps.LatLng(35.693475 , 139.75006)
    };
    var map5 = new google.maps.Map(document.getElementById("map5"), opts5);

    var mnum5 = new google.maps.LatLng(35.693475 , 139.75006);
    var marker5 = new google.maps.Marker({
      position: mnum5,
      map: map5
    });
  }
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/31 09:21

    そうですね。あらかじめJavaScript上でたくさん持っておき、その場で取り出していく感じです。

    キャンセル

  • 2018/10/31 09:31

    回答に動作確認済みのものを追記しておきました。
    コピペで済ませず、何がどうなったか理解して使ってください。(^ ^

    キャンセル

  • 2018/10/31 11:26

    丁寧なご回答ありがとうございます。まさにその通りだと考えています。しっかりと理解したうえで、参考とさせていただきます。

    キャンセル

+2

#map1がない場合、document.getElementById("map1")nullを返します。
new google.maps.Map(null)はエラーを返すようですので、そこでスクリプトは停止します。

解決方法は、nullの時にはAPIを呼ばない、あるいは適切にエラー処理をする、というものが考えられるかと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/31 01:20

    今回の場合においては、point配列の0,2,5,10,12以外のものが、nullで返されていることによってスクリプトが停止しているという認識で正しいでしょうか?
    また、回答していただいた上大変恐縮ですが、nullの時にAPIを呼ばない処理を行う際の修正例を書いて抱けると幸いです。
    何卒宜しくお願い致します。

    キャンセル

  • 2018/10/31 09:41

    一例として、以下のような書き方でも動くのでは。
    if ( document.getElementById("map1") ) ...

    キャンセル

  • 2018/10/31 11:26

    丁寧なご回答ありがとうございます。参考とさせていただきます。

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る