質問編集履歴
7
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
|
|
13
13
|
<tr><td>
|
|
14
14
|
|
|
15
|
-
<?
|
|
15
|
+
<? h($rest->name) ?>
|
|
16
16
|
|
|
17
17
|
</td></tr> <tr><td>
|
|
18
18
|
|
|
19
|
-
<?
|
|
19
|
+
<?= h($rest->genre->catch) ?>
|
|
20
20
|
|
|
21
21
|
</td></tr>
|
|
22
22
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
|
|
31
31
|
```
|
|
32
32
|
|
6
補足します。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,37 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
```html
|
|
4
|
+
|
|
5
|
+
<html>
|
|
6
|
+
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
<table border="1">
|
|
12
|
+
|
|
13
|
+
<tr><td>
|
|
14
|
+
|
|
15
|
+
<?php echo $rest->name; ?>
|
|
16
|
+
|
|
17
|
+
</td></tr> <tr><td>
|
|
18
|
+
|
|
19
|
+
<?php echo $rest->genre->catch; ?>
|
|
20
|
+
|
|
21
|
+
</td></tr>
|
|
22
|
+
|
|
23
|
+
</table>
|
|
24
|
+
|
|
25
|
+
</body>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
1
35
|
※htmlを表示中！！
|
|
2
36
|
|
|
3
37
|
要素の詳細を表示でhtmlを出力しました。
|
5
htmlを追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,85 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
<table border="1"><tr><td>くいものや チャカ 津田沼店</td></tr><tr class="map"><td>140.022590803335.6900228211</td></tr><tr><td>千葉県習志野市津田沼１－３－１１ 昭和第３ビル２Ｆ</td></tr></table>
|
|
10
|
+
|
|
11
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
12
|
+
|
|
13
|
+
<html>
|
|
14
|
+
|
|
15
|
+
<head>
|
|
16
|
+
|
|
17
|
+
<title>Google Maps V3</title>
|
|
18
|
+
|
|
19
|
+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
20
|
+
|
|
21
|
+
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=My Key&sensor=false"></script>
|
|
22
|
+
|
|
23
|
+
<script type="text/javascript">
|
|
24
|
+
|
|
25
|
+
var gmap;
|
|
26
|
+
|
|
27
|
+
google.maps.event.addDomListener(window, 'load', function()
|
|
28
|
+
|
|
29
|
+
{
|
|
30
|
+
|
|
31
|
+
var lat =35.60472;
|
|
32
|
+
|
|
33
|
+
var lng =140.12333 ;
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
var latlng = new google.maps.LatLng(lat, lng);
|
|
40
|
+
|
|
41
|
+
var mapOptions = {
|
|
42
|
+
|
|
43
|
+
zoom: 12,
|
|
44
|
+
|
|
45
|
+
center: latlng,
|
|
46
|
+
|
|
47
|
+
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
48
|
+
|
|
49
|
+
scaleControl: true
|
|
50
|
+
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
var mapObj = new google.maps.Map(document.getElementsByClassName('gmap'), mapOptions);
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
var marker = new google.maps.Marker({
|
|
58
|
+
|
|
59
|
+
position: {lat:35.60472, lng: 140.12333},
|
|
60
|
+
|
|
61
|
+
map: mapObj
|
|
62
|
+
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
</head>
|
|
70
|
+
|
|
71
|
+
<body>
|
|
72
|
+
|
|
73
|
+
<div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;">
|
|
74
|
+
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
</body>
|
|
78
|
+
|
|
79
|
+
</html>
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
8
86
|
|
|
9
87
|
```html
|
|
10
88
|
|
4
htmlを公開します。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,65 @@
|
|
|
1
|
+
※htmlを表示中！！
|
|
2
|
+
|
|
3
|
+
要素の詳細を表示でhtmlを出力しました。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
|
|
11
|
+
var gmap;
|
|
12
|
+
|
|
13
|
+
google.maps.event.addDomListener(window, 'load', function()
|
|
14
|
+
|
|
15
|
+
{
|
|
16
|
+
|
|
17
|
+
var lat =35.60472;
|
|
18
|
+
|
|
19
|
+
var lng =140.12333 ;
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
var latlng = new google.maps.LatLng(lat, lng);
|
|
26
|
+
|
|
27
|
+
var mapOptions = {
|
|
28
|
+
|
|
29
|
+
zoom: 12,
|
|
30
|
+
|
|
31
|
+
center: latlng,
|
|
32
|
+
|
|
33
|
+
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
34
|
+
|
|
35
|
+
scaleControl: true
|
|
36
|
+
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
var mapObj = new google.maps.Map(document.getElementsByClassName('gmap'), mapOptions);
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
var marker = new google.maps.Marker({
|
|
44
|
+
|
|
45
|
+
position: {lat:35.60472, lng: 140.12333},
|
|
46
|
+
|
|
47
|
+
map: mapObj
|
|
48
|
+
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
1
63
|
ホットペーパーapiから千葉県にある10件の店舗を取得しました。その10件分の店舗にgoogle map apiの地図を表示するため(つまりマッシュアップです)、色々と調べました。
|
|
2
64
|
|
|
3
65
|
mapにclassを与え、getElementsByClassNameを使えば複数配置できることを知りました。
|
3
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
|
|
105
105
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
106
106
|
|
|
107
|
-
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=
|
|
107
|
+
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=mykey&sensor=false"></script>
|
|
108
108
|
|
|
109
109
|
<script type="text/javascript">
|
|
110
110
|
|
2
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
10件分の店舗の地図を表示するため色々と調べました。
|
|
1
|
+
ホットペーパーapiから千葉県にある10件の店舗を取得しました。その10件分の店舗にgoogle map apiの地図を表示するため(つまりマッシュアップです)、色々と調べました。
|
|
2
2
|
|
|
3
3
|
mapにclassを与え、getElementsByClassNameを使えば複数配置できることを知りました。
|
|
4
4
|
|
1
補足します。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -9,6 +9,16 @@
|
|
|
9
9
|
ループを使わないと地図を複数表示できないという話を聞きましたが、ループを使わないと表示できないのですか？
|
|
10
10
|
|
|
11
11
|
一応ループを使いましたが、結果は同じく表示されません。
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
|
|
15
|
+
var i = 0;
|
|
16
|
+
|
|
17
|
+
i++
|
|
18
|
+
|
|
19
|
+
///example
|
|
20
|
+
|
|
21
|
+
```
|
|
12
22
|
|
|
13
23
|
何を補足すれば地図が表示されますか？
|
|
14
24
|
|