teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

ミスがあったため修正。

2016/11/10 09:00

投稿

kei344
kei344

スコア69625

answer CHANGED
@@ -51,8 +51,10 @@
51
51
  // マーカーにクリックイベントを追加
52
52
  function markerEvent(i, html) {
53
53
  marker[i].addListener('click', function() { // マーカーをクリックしたとき
54
+ //infoWindow[i].setContent( html );//20161110 17:59修正
55
+ //infoWindow[i].open(map, marker[i]);//20161110 17:59修正
54
- infoWindow[i].setContent( html );
56
+ infoWindow.setContent( html );//20161110 17:22修正
55
- infoWindow[i].open(map, marker[i]);
57
+ infoWindow.open(map, marker[i]);//20161110 17:22修正
56
58
  });
57
59
  }
58
60
  ```

2

ミスがあったため修正。

2016/11/10 08:59

投稿

kei344
kei344

スコア69625

answer CHANGED
@@ -11,7 +11,8 @@
11
11
  ```JavaScript
12
12
  var map;
13
13
  var marker = [];
14
- var infoWindow new google.maps.InfoWindow();
14
+ // var infoWindow new google.maps.InfoWindow();//20161110 17:22修正
15
+ var infoWindow;//20161110 17:22修正
15
16
  var markerData = [ // マーカーを立てる場所名・緯度・経度
16
17
  {
17
18
  name: 'テスと',
@@ -32,6 +33,8 @@
32
33
  zoom: 18 // 地図のズームを指定
33
34
  });
34
35
 
36
+ infoWindow = new google.maps.InfoWindow();//20161110 17:22修正
37
+
35
38
  // マーカー毎の処理
36
39
  for (var i = 0; i < markerData.length; i++) {
37
40
  markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成

1

補足の追加。

2016/11/10 08:23

投稿

kei344
kei344

スコア69625

answer CHANGED
@@ -1,4 +1,55 @@
1
1
  infoWindow[i]のように複数のinfoWindowを作らず、中身だけを替えたものを1つでいいのでは?
2
2
 
3
3
  【JavaScript - Google Mapの情報ウインドウを常にひとつだけ表示したい(31721)|teratail】
4
- [https://teratail.com/questions/31721](https://teratail.com/questions/31721)
4
+ [https://teratail.com/questions/31721](https://teratail.com/questions/31721)
5
+
6
+
7
+ ---
8
+
9
+ **追記:**
10
+
11
+ ```JavaScript
12
+ var map;
13
+ var marker = [];
14
+ var infoWindow new google.maps.InfoWindow();
15
+ var markerData = [ // マーカーを立てる場所名・緯度・経度
16
+ {
17
+ name: 'テスと',
18
+ lat: 35.681298, // 緯度
19
+ lng: 139.7640582 // 経度
20
+ }, {
21
+ name: 'てすと01',
22
+ lat: 35.6810041, // 緯度
23
+ lng: 1139.7615828 // 経度
24
+ }
25
+ ];
26
+
27
+ function initMap() {
28
+ // 地図の作成
29
+ var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成
30
+ map = new google.maps.Map(document.getElementById('google-maps'), { // #sampleに地図を埋め込む
31
+ center: mapLatLng, // 地図の中心を指定
32
+ zoom: 18 // 地図のズームを指定
33
+ });
34
+
35
+ // マーカー毎の処理
36
+ for (var i = 0; i < markerData.length; i++) {
37
+ markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成
38
+ marker[i] = new google.maps.Marker({ // マーカーの追加
39
+ position: markerLatLng, // マーカーを立てる位置を指定
40
+ map: map // マーカーを立てる地図を指定
41
+ });
42
+
43
+ markerEvent(i,'<div class="name">' + markerData[i]['name'] + '</div>'); // マーカーにクリックイベントを追加
44
+ }
45
+
46
+ }
47
+
48
+ // マーカーにクリックイベントを追加
49
+ function markerEvent(i, html) {
50
+ marker[i].addListener('click', function() { // マーカーをクリックしたとき
51
+ infoWindow[i].setContent( html );
52
+ infoWindow[i].open(map, marker[i]);
53
+ });
54
+ }
55
+ ```