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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

2回答

1844閲覧

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

shinoda

総合スコア75

JavaScript

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

0グッド

0クリップ

投稿2015/09/07 07:27

お世話になります

掲題の通りにグーグルマップのクリックした際の吹き出しを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
});


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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

投稿2015/09/07 10:18

rk7fd3s

総合スコア61

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shinoda

2015/09/07 10:25

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

2015/09/07 11: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, });
shinoda

2015/09/07 12: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">' ); } } } }); }); *******************
rk7fd3s

2015/09/08 01:46

> ★星印部分で2次元配列なのでforをネストしているのですが、二個目の変数の「var j」 > を使用していないのですが、無駄なループが発生していますよね? 別のスレでもそこ指摘させて頂いてます。 https://teratail.com/questions/15578#r24313 2次元だからってすべてをループする必要はないですよ。 要は必要な値が取れればいいのですから。
shinoda

2015/09/09 12:40

返信遅くなってしまい申し訳ありません。 >別のスレでもそこ指摘させて頂いてます。 >https://teratail.com/questions/15578#r24313 はい。ご指摘ありがとうございます。 まだ私の知識不足のため改善ができていないので改めてご質問させていただきました。 他の回答者様に書いていますが、この質問の本題については解決したため、一旦クローズとさせていただきます。 また別途ご質問させていただくかと思いますが、どうぞ宜しくお願い致します。
guest

0

ベストアンサー

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

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

//先に開いた情報ウィンドウがあれば、closeする

のあたりが参考になると思います。

投稿2015/09/07 07:41

notable

総合スコア415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shinoda

2015/09/07 07:50

お世話になっております さっそくのご回答ありがとうございます 参考サイトのご提供ありがとうございます。 私もググッてこのサイトやほかのサイトも見てそれでもうまく実装できなくてご質問させていただいています。 ご回答有り難うございました。
notable

2015/09/07 08:15

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

2015/09/07 08: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> **************************
notable

2015/09/07 08:51

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

2015/09/07 09:05

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

2015/09/07 09:10

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

2015/09/07 09:21

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

2015/09/07 09:48

何度もすみません。 openInfoWindow = new google.maps.InfoWindow({ content: msg }).open(marker.getMap(), marker); を openInfoWindow = new google.maps.InfoWindow({ content: msg }); openInfoWindow.open(marker.getMap(), marker); のように変えてみてください。
shinoda

2015/09/07 10: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"]); } } } }); });
notable

2015/09/07 12:48

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

2015/09/07 13:01

お忙しい中、ご対応有難うございます。 緯度・経度に関してはnullということはないのですが、他の項目でありましたため、お聞きしました、今回の場合は仕様的に気にする必要が無いかもしれませんので、もう少し精査致します。 いろいろな質問をしてしまっているため、別件で質問を立てたほうがよろしいでしょうか? (下の方に追記してしまいました)
notable

2015/09/07 13:29

ちょっと考えにくいので念のため確認なんですが、 data[i]がnullなときにdata[i]["M"]やdata[i]["N"]に緯度経度が入っているんですか? 長くなってきているので、これ以外に何かあれば別に立てたほうが 他の方も答えやすいと思うので、そうしたほうが良いかもしれません。
shinoda

2015/09/09 12: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が入っていた場合にはブランクを代入するという処理をしたいのです。 うまく説明できてないかもしれませんが以上です。 >長くなってきているので、これ以外に何かあれば別に立てたほうが >他の方も答えやすいと思うので、そうしたほうが良いかもしれません 了解致しました。 この質問については一旦クローズとさせていただきます。 また別途ご質問させていただくかと思いますがどうぞ宜しくお願い致します。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問