質問編集履歴
3
コードを```で囲みました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,12 +15,8 @@
|
|
|
15
15
|
これからまだまだ情報を追加したいと考えていますので、どうぞ教えた頂ける助けになります。
|
|
16
16
|
|
|
17
17
|
javascriptの情報を下記に記します。
|
|
18
|
+
|
|
18
19
|
```
|
|
19
|
-
var map;
|
|
20
|
-
var marker = [];
|
|
21
|
-
var infoWindow = [];
|
|
22
|
-
|
|
23
|
-
|
|
24
20
|
function initMap() {
|
|
25
21
|
var target = document.getElementById('map');
|
|
26
22
|
var centerp = {lat: 34.8530007, lng: 135.7713904};
|
|
@@ -38,4 +34,6 @@
|
|
|
38
34
|
console.log(markerData);
|
|
39
35
|
setData(markerData);
|
|
40
36
|
};
|
|
41
|
-
request.send();
|
|
37
|
+
request.send();
|
|
38
|
+
|
|
39
|
+
```
|
2
問題点のコードだけに編集しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,66 +14,8 @@
|
|
|
14
14
|
|
|
15
15
|
これからまだまだ情報を追加したいと考えていますので、どうぞ教えた頂ける助けになります。
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
javascriptの情報を下記に記します。
|
|
18
|
-
HTML
|
|
19
|
-
|
|
20
|
-
```<!DOCTYPE html>
|
|
21
|
-
<html lang="en">
|
|
22
|
-
<head>
|
|
23
|
-
<meta charset="UTF-8">
|
|
24
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
25
|
-
<title>マンション、ビジネス、ショップ</title>
|
|
26
|
-
<link rel="stylesheet" type="text/css" href="sitakarauenisuraido(css).css">
|
|
27
|
-
|
|
28
|
-
<script async defer
|
|
29
|
-
src="https://maps.googleapis.com/maps/api/js?&callback=initMap"> //google API取得
|
|
30
|
-
</script>
|
|
31
|
-
|
|
32
|
-
<script src="allareamap.js"></script>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<script>
|
|
38
|
-
function slideUp(){
|
|
39
|
-
document.getElementById("slideup_content").style.top = "35px";
|
|
40
|
-
document.getElementById("slidebaUp").style.display="none";
|
|
41
|
-
document.getElementById("slidebaDown").style.display="block";
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
function slideDown(){
|
|
45
|
-
document.getElementById("slideup_content").style.top = "740px";
|
|
46
|
-
document.getElementById("slidebaUp").style.display="block";
|
|
47
|
-
document.getElementById("slidebaDown").style.display="none";
|
|
48
|
-
};
|
|
49
|
-
</script>
|
|
50
|
-
|
|
51
|
-
</head>
|
|
52
|
-
<body>
|
|
53
|
-
|
|
54
|
-
<div class="box">
|
|
55
|
-
|
|
56
|
-
<div id="map"></div>
|
|
57
|
-
|
|
58
|
-
<input type="button" id="slidebaUp" value="スライドアップ！" onclick="slideUp()">
|
|
59
|
-
<input type="button" id="slidebaDown" value="スライドダウン！ " onclick="slideDown()">
|
|
60
|
-
|
|
61
|
-
<div id="slideup_content">
|
|
62
|
-
<!--ここにスライドアップしたときに表示したい内容を記述-->
|
|
63
|
-
<div id="mansyon">
|
|
64
|
-
</div>
|
|
65
|
-
<div id="business">
|
|
66
|
-
</div>
|
|
67
|
-
<div id="shop">
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
</div>
|
|
72
|
-
</body>
|
|
73
|
-
</html>
|
|
74
18
|
```
|
|
75
|
-
javascript
|
|
76
|
-
```
|
|
77
19
|
var map;
|
|
78
20
|
var marker = [];
|
|
79
21
|
var infoWindow = [];
|
|
@@ -96,90 +38,4 @@
|
|
|
96
38
|
console.log(markerData);
|
|
97
39
|
setData(markerData);
|
|
98
40
|
};
|
|
99
|
-
request.send();
|
|
41
|
+
request.send();
|
|
100
|
-
|
|
101
|
-
function setData(markerData){
|
|
102
|
-
var mansyon_html=""
|
|
103
|
-
var business_html=""
|
|
104
|
-
var shop_html=""
|
|
105
|
-
var icon;
|
|
106
|
-
|
|
107
|
-
for (var i = 0; i < markerData.results.length; i++) {
|
|
108
|
-
var markerLatLng = new google.maps.LatLng({
|
|
109
|
-
lat: Number(markerData.results[i]['lat']),
|
|
110
|
-
lng: Number(markerData.results[i]['lng'])
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
if (markerData.results[i]['種別'] === 'マンション情報'){
|
|
114
|
-
icon = new google.maps.MarkerImage('グリーンマーカー.png')
|
|
115
|
-
} else if(markerData.results[i]['種別']==='ビジネス情報'){
|
|
116
|
-
icon = new google.maps.MarkerImage('ピンクマーカー.png')
|
|
117
|
-
} else {
|
|
118
|
-
icon = new google.maps.MarkerImage('イエローマーカー.PNG');
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
marker[i] = new google.maps.Marker({
|
|
122
|
-
position: markerLatLng,
|
|
123
|
-
map: map,
|
|
124
|
-
icon:icon
|
|
125
|
-
});
|
|
126
|
-
|
|
127
|
-
var name = markerData.results[i]['name'];
|
|
128
|
-
var houmonritu=markerData.results[i]['訪問率']
|
|
129
|
-
var kuikiNo=markerData.results[i]['区域NO']
|
|
130
|
-
var type=markerData.results[i]['タイプ']
|
|
131
|
-
var caution=markerData.results[i]['注意事項']
|
|
132
|
-
var address = markerData.results[i]['address'];
|
|
133
|
-
var card = markerData.results[i]['card'];
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
if (markerData.results[i]['種別'] === 'マンション情報'){
|
|
137
|
-
var setHtml = name + houmonritu + '<br>' + kuikiNo + '<br>' + type +
|
|
138
|
-
'<br>'+caution+'<br>'+address+'<br>'+'<a href='+card+'>'+card+'</a>'
|
|
139
|
-
} else if(markerData.results[i]['種別'] === 'ビジネス情報'){
|
|
140
|
-
var setHtml = name + houmonritu + '<br>'+kuikiNo + '<br>' +type +
|
|
141
|
-
'<br>'+caution+'<br>'+address+'<br>'+'<a href='+card+'>'+card+'</a>'
|
|
142
|
-
}else{
|
|
143
|
-
var setHtml = name + houmonritu + '<br>'+kuikiNo + '<br>' +type +
|
|
144
|
-
'<br>'+caution+'<br>'+address+'<br>'+'<a href='+card+'>'+card+'</a>'
|
|
145
|
-
}
|
|
146
|
-
infoWindow[i] = new google.maps.InfoWindow({
|
|
147
|
-
content: setHtml
|
|
148
|
-
if (markerData.results[i]['種別'] === 'マンション情報'){
|
|
149
|
-
mansyon_html += '<a href="javascript:myclick(' + i + ')">' + name + houmonritu+'</a><br />';
|
|
150
|
-
}else if (markerData.results[i]['種別'] === 'ビジネス情報') {
|
|
151
|
-
business_html += '<a href="javascript:myclick(' + i + ')">' + name + houmonritu+'</a><br />';
|
|
152
|
-
}else{
|
|
153
|
-
shop_html += '<a href="javascript:myclick(' + i + ')">' + name + houmonritu+'</a><br />';
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
markerEvent(i);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
document.getElementById("mansyon").innerHTML = '<input id="openClose" type="checkbox"></input>'+'マン
|
|
160
|
-
ション区域<br>' + mansyon_html;
|
|
161
|
-
document.getElementById("business").innerHTML = '<input id="openClose" type="checkbox"></input>'+'マン
|
|
162
|
-
ション区域<br>' + business_html;
|
|
163
|
-
document.getElementById("shop").innerHTML = '<input id="openClose" type="checkbox"></input>'+'ショップ
|
|
164
|
-
区域<br>' + shop_html;
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
var openWindow;
|
|
168
|
-
|
|
169
|
-
function markerEvent(i) {
|
|
170
|
-
marker[i].addListener('click', function() {
|
|
171
|
-
myclick(i);
|
|
172
|
-
});
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
function myclick(i) {
|
|
176
|
-
document.getElementById("slideup_content").style.top="740px";
|
|
177
|
-
document.getElementById("slidebaUp").style.display="block";
|
|
178
|
-
document.getElementById("slidebaDown").style.display="none";
|
|
179
|
-
if(openWindow){
|
|
180
|
-
openWindow.close();
|
|
181
|
-
}
|
|
182
|
-
infoWindow[i].open(map, marker[i]);
|
|
183
|
-
openWindow = infoWindow[i];
|
|
184
|
-
}
|
|
185
|
-
```
|
1
コードを```で囲みました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
|
|
17
17
|
HTMLとjavascriptの情報を下記に記します。
|
|
18
18
|
HTML
|
|
19
|
+
|
|
19
|
-
<!DOCTYPE html>
|
|
20
|
+
```<!DOCTYPE html>
|
|
20
21
|
<html lang="en">
|
|
21
22
|
<head>
|
|
22
23
|
<meta charset="UTF-8">
|
|
@@ -70,9 +71,9 @@
|
|
|
70
71
|
</div>
|
|
71
72
|
</body>
|
|
72
73
|
</html>
|
|
73
|
-
|
|
74
|
+
```
|
|
74
75
|
javascript
|
|
75
|
-
|
|
76
|
+
```
|
|
76
77
|
var map;
|
|
77
78
|
var marker = [];
|
|
78
79
|
var infoWindow = [];
|
|
@@ -180,4 +181,5 @@
|
|
|
180
181
|
}
|
|
181
182
|
infoWindow[i].open(map, marker[i]);
|
|
182
183
|
openWindow = infoWindow[i];
|
|
183
|
-
}
|
|
184
|
+
}
|
|
185
|
+
```
|