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

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

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

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

Q&A

2回答

436閲覧

JavaScript:GoogleMap:吹き出し

yu-kos

総合スコア8

JavaScript

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

0グッド

0クリップ

投稿2017/11/21 11:45

###実現したいこと
マーカーを複数設置し、全マーカーに吹き出しをつける。
###現状
一つのマーカーにのみ吹き出しが表示される。(マーカーがある場所の緯度経度を出力したい)

javascript

1<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDuYZuE9EYnhKImsKLIlEuc4YXa7zVKi4Y&sensor=false"> 2 </script> 3 <div id="map" style="width:600px;height:460px;"></div> 4 5 <script type="text/javascript"> 6 function Info(x,y){ 7 this.x = +x; 8 this.y = +y; 9 } 10 11 var lat=35.7086077; 12 var lng=139.7323608; 13 14 var myMap=new google.maps.Map(document.getElementById("map"),{ 15 zoom: 5, 16 center: new google.maps.LatLng(lat,lng), 17 scaleControl: true, 18 mapType: google.maps.MapTypeId.ROADMAP 19 }); 20 21var data=[1000,34.384246,132.456665, 22 1000,37.9182011,139.0374756] 23infoList=[]; 24 25for(var i=0,len=data.length;i<len;++i){ 26 if(data[i]==1000){ 27 x=data[i+1]; 28 y=data[i+2]; 29 infoList.push(new Info(x,y)); 30 } 31} 32 function sendai(){ 33 check1=document.form1.a1.checked; 34 if(check1==true){ 35 var latlng=new google.maps.LatLng(38.267230, 140.822840); 36 marker1=new google.maps.Marker({ 37 position: latlng, 38 map: myMap 39 }); 40 }else{ 41 marker1.setMap(null); 42 } 43 } 44 45 var marker_list1; 46 marker_list1=new google.maps.MVCArray(); 47 48 function maker1(){ 49 check1=document.form1.a1.checked; 50 if(check1==true){ 51 for(var i=0;i<infoList.length;++i){ 52 var latlng=new google.maps.LatLng(infoList[i].x,infoList[i].y); 53 var marker1=new google.maps.Marker({ 54 position: latlng, 55 map: myMap 56 }); 57 58 var infoWindow=new google.maps.InfoWindow({ 59 content: latlng 60 }); 61 google.maps.event.addListener(marker1,'click',function(){ 62 infoWindow.open(myMap,marker1); 63 }); 64 marker_list1.push(marker1); 65 } 66 }else{ 67 marker_list1.forEach(function(marker1,idx){ 68 marker1.setMap(null); 69 }); 70 } 71 } 72</script> 73 74<body> 75<form name="form1"> 76<input id="a1" type="checkbox" onclick="maker1()">マーカー<br> 77</form> 78</body>

###コメント
吹き出しをつける位置がループの最後のlatlngになっていることは分かるのですがどうしたらよいか・・・。
申し訳ございませんがよろしくお願いします。

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

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

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

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

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

guest

回答2

0

どうやら最後のだけが登録されてしまうようですが、作成する所だけを別functionにすればできるようです

for(var i=0;i<infoList.length;++i){ var latlng=new google.maps.LatLng(infoList[i].x,infoList[i].y); var marker1=new google.maps.Marker({ position: latlng, map: myMap }); addListerPoint(marker1,latlng); function addListerPoint(marker1,latlng){ google.maps.event.addListener(marker1,'click',function(){ new google.maps.InfoWindow({ content:String(latlng) }).open(marker1.map,marker1); }); } }

contentの部分は文字列しか駄目なようで以下のエラーが出力されます
InvalidValueError: setContent: not a string;
content:String(latlng)
で文字列にして表示してみて下さい

投稿2017/11/22 02:03

date

総合スコア1820

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

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

0

変数infoWindowをループのたびに上書きしているのが原因です。

javascript

1 var infoWindow=new google.maps.InfoWindow({ 2 content: latlng 3 }); 4 google.maps.event.addListener(marker1,'click',function(){ 5 infoWindow.open(myMap,marker1); 6 });

javascript

1 (function(infoWindow){ 2 google.maps.event.addListener(marker1,'click',function(){ 3 infoWindow.open(myMap,marker1); 4 }); 5 })( 6 new google.maps.InfoWindow({ 7 content: latlng 8 }); 9 )

みたいな感じでクロージャを使うのはどうでしょう?
動作未確認です。

投稿2017/11/21 12:16

Lhankor_Mhy

総合スコア35865

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

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

yu-kos

2017/11/22 00:38

括弧の位置など少しいじってみたのですが状況変わらずです。 また、latlngが空白となって反映されてしまうのも変わらずです…。
Lhankor_Mhy

2017/11/22 01:44

> latlngが空白となって反映されてしまうのも変わらずです… 初耳です。質問には書いていないようですが…… あとで確認してみます。
Lhankor_Mhy

2017/11/22 02:39

dateさんの回答のとおりでいいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問