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