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

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

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

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

Q&A

解決済

1回答

8770閲覧

googlemapのマーカーをクリックした際に情報ウィンドウが出るようにしたい

ry_xxx

総合スコア19

JavaScript

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

1グッド

1クリップ

投稿2017/03/16 16:34

編集2017/03/16 16:38

googlemapのマーカーをクリックした際に情報ウィンドウが出るようにしたいのですが、
JavaScriptやGoogle Map apiを使用しGoogleマップにピンを立て、クリックした際に情報ウィンドウを一つ表示させたいと思っております。

下記のソースコードが紹介されていたので、試してみたところ、ピンを一つ押すとすべての情報ウィンドウが開いてしまいます。
押したピンの情報ウィンドウのみ開きたいのですが、どのようにカスタマイズしたら開くのでしょうか。
おそらく、下記の部分が原因かと思われますが分かりませんでした。
どうかご教授して頂きますよう宜しくお願い致します。

原因と思われる部分

javaScript

1 google.maps.event.addListener(marker[i], 'click', function(e) { 2 for(var i = 0; i < markers.length; i++) { 3 if(marker[i].position.G == e.latLng.G && marker[i].position.K == e.latLng.K) { 4 //クリックしたマーカーだったら詳細を表示 5 infoWindow[i].open(map, marker[i]); 6 } else { 7 //クリックしたマーカーでなければ詳細を閉じる 8 infoWindow[i].close(); 9 } 10 } 11 }); 12

試してみたソースコード

JavaScript

1/* map関係のオブジェクトをグローバルで定義 */ 2var markers = [], 3 marker = [], 4 infoWindow = [], 5 map = {}; 6 7function initialize() { 8 var mapOptions = { 9 center: new google.maps.LatLng(35.712213, 139.706726), //Map中心の座標 10 zoom: 16 //Mapのズーム 11 }; 12 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //Mapを表示する要素のIDを指定してMapを読み込み 13 14 15 /* マーカーの情報を設定 */ 16 markers = [ 17 { 18 position: new google.maps.LatLng(35.712213, 139.706726), 19 title: 'ロケーション1', 20 summary: '説明が入ります説明が入ります説明が入ります', 21 figure: 'images/figure01.jpg' 22 }, 23 { 24 position: new google.maps.LatLng(35.712518, 139.708085), 25 title: 'ロケーション2', 26 summary: '説明が入ります説明が入ります説明が入ります', 27 figure: 'images/figure02.jpg' 28 }, 29 { 30 position: new google.maps.LatLng(35.712449, 139.705825), 31 title: 'ロケーション3', 32 summary: '説明が入ります説明が入ります説明が入ります', 33 figure: 'images/figure03.jpg' 34 }, 35 { 36 position: new google.maps.LatLng(35.713205, 139.705060), 37 title: 'ロケーション4', 38 summary: '説明が入ります説明が入ります説明が入ります', 39 figure: 'images/figure04.jpg' 40 }, 41 { 42 position: new google.maps.LatLng(35.713478, 139.707359), 43 title: 'ロケーション5', 44 summary: '説明が入ります説明が入ります説明が入ります', 45 figure: 'images/figure05.jpg' 46 } 47 ]; 48 49 /* マーカーのアイコンの設定 */ 50 var image = { 51 url: "images/mark.png", //画像のURL 52 size: new google.maps.Size(32, 32), //サイズ 53 origin: new google.maps.Point(0, 0), //アイコンの基準位置 54 anchor: new google.maps.Point(16, 32), //アイコンのアンカーポイント 55 scaledSize: new google.maps.Size(32, 32) //アイコンのサイズ 56 }; 57 58 59 /* マーカの実装 */ 60 for(var i = 0; i < markers.length; i++){ 61 marker[i] = new google.maps.Marker({ 62 position: markers[i].position, 63 map: map, 64 icon: image, 65 title: markers[i].title, 66 zIndex: markers.length - i 67 }); 68 69 /* 場所の詳細の準備 */ 70 infoWindow[i] = new google.maps.InfoWindow({ 71 content: '<section style="margin-top:5px;"><figure style="float: left;"><img src="' + markers[i].figure + '" width="64px"></figure><div style="margin-left: 74px;"><h2 style="margin-bottom: 5px;font-size: 1.17em;">' + markers[i].title + '</h2><p style="font-size: 0.84em;">' + markers[i].summary + '</p></div></section>' 72 }); 73 74 /* マーカーをクリックしたら場所の詳細を表示 */ 75 google.maps.event.addListener(marker[i], 'click', function(e) { 76 for(var i = 0; i < markers.length; i++) { 77 if(marker[i].position.G == e.latLng.G && marker[i].position.K == e.latLng.K) { 78 //クリックしたマーカーだったら詳細を表示 79 infoWindow[i].open(map, marker[i]); 80 } else { 81 //クリックしたマーカーでなければ詳細を閉じる 82 infoWindow[i].close(); 83 } 84 } 85 }); 86 } 87} 88 89google.maps.event.addDomListener(window, 'load', initialize); //Google Map APIの実行
Daimian👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

こちらのサイトで詳しく出てます。
http://www.tam-tam.co.jp/tipsnote/javascript/post7755.html

投稿2017/03/16 16:42

shaak

総合スコア607

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

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

ry_xxx

2017/03/17 01:21

無事解決致しました!ありがとうございます!大変助かりました。 紹介頂いたサイトのソースを少しカスタマイズさせて頂きました! 今後とも宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問