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

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

ただいまの
回答率

90.53%

  • JavaScript

    16325questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

グーグルマップのウィンドウを1つにする

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 702

shinoda

score 82

お世話になります

掲題の通りにグーグルマップのクリックした際の吹き出しを1つのみにしたい(すでに開いているウィンドウを削除)のですがうまくいきません。

現在作成中のコードを下記に示します。

ご教授いただければ幸いです。

*******
$(function() {
  var data = new Array();
  $.getJSON("array.json" , function(data) {
    for( var i in data){
      for( var j in data[i] ){
          var myMarker = new google.maps.Marker({
          position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
          map: myMap,
          });
          attachMessage(myMarker, data[i]["D"] + '</br>' + data[i]["E"]);
      }
    }
  });
});

function attachMessage(marker,msg) {
  google.maps.event.addListener(marker, 'click', function() {
    new google.maps.Geocoder().geocode({
      latLng: marker.getPosition()
    }, function(result, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        new google.maps.InfoWindow({
          content: msg
        }).open(marker.getMap(), marker);
      }
    });
  });
}

var myMap = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: new google.maps.LatLng(34.894000, 136.930437),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
********
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

参考になりそうなページを見つけました。

http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_singleInfoWindow.html

//先に開いた情報ウィンドウがあれば、closeする
のあたりが参考になると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/07 16:50

    お世話になっております

    さっそくのご回答ありがとうございます

    参考サイトのご提供ありがとうございます。
    私もググッてこのサイトやほかのサイトも見てそれでもうまく実装できなくてご質問させていただいています。

    ご回答有り難うございました。

    キャンセル

  • 2015/09/07 17:15

    すでにご覧になられてましたか。
    失礼しました…。

    うまくいかないと仰るソースを記載いただければ
    何かアドバイスできるかもしれません。
    ちなみに質問にソースを記載するときは
    ↓のように書くと見やすく表示されます。

    ```
    ここにソースを書く
    ```

    キャンセル

  • 2015/09/07 17:29

    いえいえ、私の説明文が至らぬばかりに余計なお手数をかけて申し訳ありません。

    では下記にコードを示します。
    ★印の部分が問題の箇所です


    ****【実際のコード】**************
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    </head>
    <body>
    <div id="map" style="width: 900px; height: 500px;"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script language="JavaScript">

    $(function() {
    var data = new Array();
    $.getJSON("array.json" , function(data) {
    for( var i in data){
    for( var j in data[i] ){
    var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
    map: myMap,
    icon: icon,
    });
    attachMessage(myMarker, data[i]["D"] + '</br>' + data[i]["E"] + '</br>' + '<img src="images/' + data[i]["K"] + '" width="128" height="128">' );
    }
    }
    });
    });

    function attachMessage(marker,msg) {
    google.maps.event.addListener(marker, 'click', function() {
    ★ if (openInfoWindow) {
    openInfoWindow.close();
    }
    new google.maps.Geocoder().geocode({
    latLng: marker.getPosition()
    }, function(result, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    ★ new google.maps.openInfoWindow({
    content: msg
    }).open(marker.getMap(), marker);
    }
    });
    });
    }

    var icon = new google.maps.MarkerImage('icon/homeicon-32.png');

    var myMap = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: new google.maps.LatLng(34.894000, 136.930437),
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    </script>
    </body>
    </html>
    **************************

    キャンセル

  • 2015/09/07 17:51

    > ★ new google.maps.openInfoWindow({
    のところを
    openInfoWindow = new google.maps.InfoWindow({
    にしてみたらどうでしょうか。

    キャンセル

  • 2015/09/07 18:05

    試してみましたが
    ReferenceError: openInfoWindow is not defined
    とエラーを吐いてしまいます。

    キャンセル

  • 2015/09/07 18:10

    すみません。よくみたら
    openInfoWindow
    が定義されてませんね。
    とりあえずではあるんですが、
    <script language="JavaScript">
    の下に
    var openInfoWindow = null;
    を入れてみてください。

    キャンセル

  • 2015/09/07 18:21

    お世話になっております。

    エラーは消えましたが、複数のウィンドウが表示されてしまいます。
    ※ 新しいマーカーをクリックしても消えない

    キャンセル

  • 2015/09/07 18:48

    何度もすみません。

    openInfoWindow = new google.maps.InfoWindow({
    content: msg
    }).open(marker.getMap(), marker);



    openInfoWindow = new google.maps.InfoWindow({
    content: msg
    });
    openInfoWindow.open(marker.getMap(), marker);

    のように変えてみてください。

    キャンセル

  • 2015/09/07 19:06

    いえいえ、こちらも質問ばかりで申し訳ありません。
    先ほどのご回答でうまくいきました。
    本当にありがとうございました。

    ベストアンサーとさせていただきますが、甘えて別件のご質問をさせてください。

    【質問事項】
    下記コードの★印のようにdata[i]の中身がnullだった場合、nullにブランクを代入したいのですがどのように記述すればよろしいでしょうか?

    $(function() {
    var data = new Array();
    $.getJSON("array.json" , function(data) {
    for( var i in data){
    for( var j in data[i] ){
    ★if(data[i] == null){
    null = "";
    var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
    map: myMap,
    });
    attachMessage(myMarker, data[i]["D"] + '</br>' + data[i]["E"]);
    }
    }
    }
    });
    });

    キャンセル

  • 2015/09/07 21:48

    遅くなってすみません。
    data[i]がnullだった場合、緯度経度も取れないので
    マーカーを設置しなくても良いのではと思うのですが、違いますか?
    その場合、for文を次に進めれば良いので、
    for( var i in data){
    if(data[i] == null){
    continue;
    }
    とするのが良いと思うのですが、いかがでしょうか。

    キャンセル

  • 2015/09/07 22:01

    お忙しい中、ご対応有難うございます。

    緯度・経度に関してはnullということはないのですが、他の項目でありましたため、お聞きしました、今回の場合は仕様的に気にする必要が無いかもしれませんので、もう少し精査致します。

    いろいろな質問をしてしまっているため、別件で質問を立てたほうがよろしいでしょうか?
    (下の方に追記してしまいました)

    キャンセル

  • 2015/09/07 22:29

    ちょっと考えにくいので念のため確認なんですが、
    data[i]がnullなときにdata[i]["M"]やdata[i]["N"]に緯度経度が入っているんですか?

    長くなってきているので、これ以外に何かあれば別に立てたほうが
    他の方も答えやすいと思うので、そうしたほうが良いかもしれません。

    キャンセル

  • 2015/09/09 21:36

    返信遅くなって申し訳ありません

    >ちょっと考えにくいので念のため確認なんですが、
    >data[i]がnullなときにdata[i]["M"]やdata[i]["N"]に緯度経度が入っているんですか?

    data[i]がnullという事象はないのですが、もともとエクセルシートから値を取ってきているため、例えばですがdata[1]["C"]となると、エクセルシートの1行目のC列ということになりますが、C列には値が入っていても、D列は空白というパターンが有ります。そのエクセルシートをJSONファイルに変化する際にdata[1]["D"]にはnullとなって渡ってきてしまいます。
    javascriptでループで回す際に、nullとなっているカラム(エクセルで言うセル)の部分を読んでしまうと、そのカラムを表示した時にnullという文字列が表示されてしまうので、あるカラムがnullが入っていた場合にはブランクを代入するという処理をしたいのです。
    うまく説明できてないかもしれませんが以上です。

    >長くなってきているので、これ以外に何かあれば別に立てたほうが
    >他の方も答えやすいと思うので、そうしたほうが良いかもしれません

    了解致しました。
    この質問については一旦クローズとさせていただきます。
    また別途ご質問させていただくかと思いますがどうぞ宜しくお願い致します。
    ありがとうございました。

    キャンセル

0

nullはnullですよ。
空文字はもとより、何の値も入れられません。

ブランク(空文字)を入れてどのような動作を期待(しようと)しているのか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/07 19:25

    >ブランク(空文字)を入れてどのような動作を期待(しようと)しているのか?

    グーグルマップの吹き出しにそのまま文字列で「null」と表示されてしまうので、ブランクを入れて表示したいということです。
    そのnullの項目を削除するわけにもいかないので、何かを代入したいということです

    キャンセル

  • 2015/09/07 20:19

    google map api に精通しているわけじゃないので、私にはわかりませんが、

    そもそも吹き出しに表示されるものはどこに格納されているものなのかは把握してますでしょうか?

    それが格納されている変数をブランクにすればいいのでは無いかと浅知恵。


    そもそも、data[i]がnullの時に、下記を実行するのは無理があるのでは無いかと。。。

    var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
    map: myMap,
    });

    キャンセル

  • 2015/09/07 21:23

    お世話になっております。
    もう少し調べて、もし不明点があれば別途ご質問させてもらいます。

    コードを見なおしてみて一部変なところがあったのでご意見ください。
    ★星印部分で2次元配列なのでforをネストしているのですが、二個目の変数の「var j」を使用していないのですが、無駄なループが発生していますよね?

    **【コード】**********
    $(function() {
    var data = new Array();
    $.getJSON("array.json" , function(data) {
    for( var i in data){
    ★ for( var j in data[i] ){
    if(data[i]["C"] == 1){ // 表示・非表示フラグを判定
    var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
    map: myMap,
    if(data[i]["B"] == 10){
    icon: icon,
    };
    });
    attachMessage(myMarker,"物件名 : " + data[i]["D"] + '</br>' + "所在地 : " + data[i]["E"] + '</br>' +
    '<a href="http://localhost/tita_1.1/tera.html" target="_blank">詳細はこちら</a>' + '</br>' +
    '<img src="images/' + data[i]["K"] + '" width="128" height="128">' );
    }
    }
    }
    });
    });
    *******************

    キャンセル

  • 2015/09/08 10:46

    > ★星印部分で2次元配列なのでforをネストしているのですが、二個目の変数の「var j」
    > を使用していないのですが、無駄なループが発生していますよね?

    別のスレでもそこ指摘させて頂いてます。
    https://teratail.com/questions/15578#r24313

    2次元だからってすべてをループする必要はないですよ。
    要は必要な値が取れればいいのですから。

    キャンセル

  • 2015/09/09 21:40

    返信遅くなってしまい申し訳ありません。

    >別のスレでもそこ指摘させて頂いてます。
    >https://teratail.com/questions/15578#r24313

    はい。ご指摘ありがとうございます。
    まだ私の知識不足のため改善ができていないので改めてご質問させていただきました。

    他の回答者様に書いていますが、この質問の本題については解決したため、一旦クローズとさせていただきます。
    また別途ご質問させていただくかと思いますが、どうぞ宜しくお願い致します。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16325questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。