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

回答編集履歴

2

追記

2016/10/13 07:32

投稿

date
date

スコア1820

answer CHANGED
@@ -49,4 +49,75 @@
49
49
  </html>
50
50
  ```
51
51
 
52
- googlemapを表示するにはある程度の高さheightを設定していないと表示されていないように見えてしまいます。
52
+ googlemapを表示するにはある程度の高さheightを設定していないと表示されていないように見えてしまいます。
53
+
54
+ 2016/10/13 16:30
55
+ ```
56
+ <?php
57
+ $key = 'apikey';
58
+ $count = '10';
59
+ $large_area = 'Z014';
60
+ $start = 1;
61
+ $format = 'xml';
62
+ $url = 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=' . $key . '&count=' . $count . '&large_area=' . $large_area . '&start=' . $start . '&format=' . $format;
63
+ $xml = simplexml_load_file ( $url );
64
+ $total_count = $xml->results_available;
65
+ if (! $xml->shop) {
66
+ echo 'We can not find!!';
67
+ } else {
68
+ $i = 0;
69
+ ?>
70
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
71
+ <html>
72
+ <head>
73
+ <title>Google Maps V3</title>
74
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
75
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
76
+ <script type="text/javascript">
77
+ function hottomap(g_lat,g_lng,g_count){
78
+ google.maps.event.addDomListener(window, 'load', function() {
79
+ var lat =35.60472;
80
+ var lng =140.12333;
81
+ var latlng = new google.maps.LatLng(lat, lng);
82
+ var mapOptions = {
83
+ zoom: 12,
84
+ center: latlng,
85
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
86
+ scaleControl: true
87
+ };
88
+ var mapObj = new google.maps.Map(document.getElementById("gmap_" + g_count), mapOptions);
89
+ var marker = new google.maps.Marker({
90
+ position: {lat:g_lat, lng:g_lng},
91
+ map: mapObj
92
+ });
93
+ });
94
+ }
95
+ </script>
96
+ </head>
97
+ <body>
98
+ <?foreach ( $xml->shop as $rest ) { ?>
99
+
100
+ <table border="1">
101
+ <tr>
102
+ <td><?php echo $rest->name; ?></td>
103
+ </tr>
104
+ <tr class="map">
105
+ <td><?=$rest->lng;?><?=$rest->lat;?></td>
106
+ </tr>
107
+ <tr>
108
+ <td><?=$rest->address; ?></td>
109
+ </tr>
110
+ </table>
111
+ <script>
112
+ hottomap(<?=$rest->lng;?>,<?=$rest->lat;?>,<?=$i?>)
113
+ </script>
114
+ <div id="gmap_<?=$i?>" style="width: 500px; height: 370px; border: 1px solid Gray;"></div>
115
+
116
+ <?php
117
+ $i++;
118
+ }
119
+ }
120
+ ?>
121
+ </body>
122
+ </html>
123
+ ```

1

追記

2016/10/13 07:32

投稿

date
date

スコア1820

answer CHANGED
@@ -6,4 +6,47 @@
6
6
  <script>
7
7
  alert();
8
8
  </script>
9
- を入れて実行すれば、javascript処理前、既にホットペッパーの情報が入っていることが確認できるでしょう。
9
+ を入れて実行すれば、javascript処理前、既にホットペッパーの情報が入っていることが確認できるでしょう。
10
+
11
+ 2016-10-12 9:53 追記
12
+ ```
13
+ <?php
14
+ $lat = 35.68944;
15
+ $lng = 139.69167;
16
+
17
+ ?>
18
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
19
+ <html>
20
+ <head>
21
+ <title>Google Maps V3</title>
22
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
23
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
24
+ <script type="text/javascript">
25
+ google.maps.event.addDomListener(window, 'load', function()
26
+ {
27
+ var lat =35.68944;
28
+ var lng =139.69167;
29
+
30
+ var latlng = new google.maps.LatLng(lat, lng);
31
+ var mapOptions = {
32
+ zoom: 12,
33
+ center: latlng,
34
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
35
+ scaleControl: true
36
+ };
37
+ var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions);
38
+
39
+ var marker = new google.maps.Marker({
40
+ position: {lat: <?= $lat ?>, lng: <?=$lng ?>},
41
+ map: mapObj
42
+ });
43
+ });
44
+ </script>
45
+ </head>
46
+ <body>
47
+ <div id="gmap" style="width: 400px; height: 300px;"></div>
48
+ </body>
49
+ </html>
50
+ ```
51
+
52
+ googlemapを表示するにはある程度の高さheightを設定していないと表示されていないように見えてしまいます。