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の実行

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/17 01:21