回答編集履歴

2

追記

2016/10/13 07:32

投稿

date
date

スコア1820

test CHANGED
@@ -101,3 +101,145 @@
101
101
 
102
102
 
103
103
  googlemapを表示するにはある程度の高さheightを設定していないと表示されていないように見えてしまいます。
104
+
105
+
106
+
107
+ 2016/10/13 16:30
108
+
109
+ ```
110
+
111
+ <?php
112
+
113
+ $key = 'apikey';
114
+
115
+ $count = '10';
116
+
117
+ $large_area = 'Z014';
118
+
119
+ $start = 1;
120
+
121
+ $format = 'xml';
122
+
123
+ $url = 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=' . $key . '&count=' . $count . '&large_area=' . $large_area . '&start=' . $start . '&format=' . $format;
124
+
125
+ $xml = simplexml_load_file ( $url );
126
+
127
+ $total_count = $xml->results_available;
128
+
129
+ if (! $xml->shop) {
130
+
131
+ echo 'We can not find!!';
132
+
133
+ } else {
134
+
135
+ $i = 0;
136
+
137
+ ?>
138
+
139
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
140
+
141
+ <html>
142
+
143
+ <head>
144
+
145
+ <title>Google Maps V3</title>
146
+
147
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
148
+
149
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
150
+
151
+ <script type="text/javascript">
152
+
153
+ function hottomap(g_lat,g_lng,g_count){
154
+
155
+ google.maps.event.addDomListener(window, 'load', function() {
156
+
157
+ var lat =35.60472;
158
+
159
+ var lng =140.12333;
160
+
161
+ var latlng = new google.maps.LatLng(lat, lng);
162
+
163
+ var mapOptions = {
164
+
165
+ zoom: 12,
166
+
167
+ center: latlng,
168
+
169
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
170
+
171
+ scaleControl: true
172
+
173
+ };
174
+
175
+ var mapObj = new google.maps.Map(document.getElementById("gmap_" + g_count), mapOptions);
176
+
177
+ var marker = new google.maps.Marker({
178
+
179
+ position: {lat:g_lat, lng:g_lng},
180
+
181
+ map: mapObj
182
+
183
+ });
184
+
185
+ });
186
+
187
+ }
188
+
189
+ </script>
190
+
191
+ </head>
192
+
193
+ <body>
194
+
195
+ <?foreach ( $xml->shop as $rest ) { ?>
196
+
197
+
198
+
199
+ <table border="1">
200
+
201
+ <tr>
202
+
203
+ <td><?php echo $rest->name; ?></td>
204
+
205
+ </tr>
206
+
207
+ <tr class="map">
208
+
209
+ <td><?=$rest->lng;?><?=$rest->lat;?></td>
210
+
211
+ </tr>
212
+
213
+ <tr>
214
+
215
+ <td><?=$rest->address; ?></td>
216
+
217
+ </tr>
218
+
219
+ </table>
220
+
221
+ <script>
222
+
223
+ hottomap(<?=$rest->lng;?>,<?=$rest->lat;?>,<?=$i?>)
224
+
225
+ </script>
226
+
227
+ <div id="gmap_<?=$i?>" style="width: 500px; height: 370px; border: 1px solid Gray;"></div>
228
+
229
+
230
+
231
+ <?php
232
+
233
+ $i++;
234
+
235
+ }
236
+
237
+ }
238
+
239
+ ?>
240
+
241
+ </body>
242
+
243
+ </html>
244
+
245
+ ```

1

追記

2016/10/13 07:32

投稿

date
date

スコア1820

test CHANGED
@@ -15,3 +15,89 @@
15
15
  </script>
16
16
 
17
17
  を入れて実行すれば、javascript処理前、既にホットペッパーの情報が入っていることが確認できるでしょう。
18
+
19
+
20
+
21
+ 2016-10-12 9:53 追記
22
+
23
+ ```
24
+
25
+ <?php
26
+
27
+ $lat = 35.68944;
28
+
29
+ $lng = 139.69167;
30
+
31
+
32
+
33
+ ?>
34
+
35
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
36
+
37
+ <html>
38
+
39
+ <head>
40
+
41
+ <title>Google Maps V3</title>
42
+
43
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
44
+
45
+ <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
46
+
47
+ <script type="text/javascript">
48
+
49
+ google.maps.event.addDomListener(window, 'load', function()
50
+
51
+ {
52
+
53
+ var lat =35.68944;
54
+
55
+ var lng =139.69167;
56
+
57
+
58
+
59
+ var latlng = new google.maps.LatLng(lat, lng);
60
+
61
+ var mapOptions = {
62
+
63
+ zoom: 12,
64
+
65
+ center: latlng,
66
+
67
+ mapTypeId: google.maps.MapTypeId.ROADMAP,
68
+
69
+ scaleControl: true
70
+
71
+ };
72
+
73
+ var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions);
74
+
75
+
76
+
77
+ var marker = new google.maps.Marker({
78
+
79
+ position: {lat: <?= $lat ?>, lng: <?=$lng ?>},
80
+
81
+ map: mapObj
82
+
83
+ });
84
+
85
+ });
86
+
87
+ </script>
88
+
89
+ </head>
90
+
91
+ <body>
92
+
93
+ <div id="gmap" style="width: 400px; height: 300px;"></div>
94
+
95
+ </body>
96
+
97
+ </html>
98
+
99
+ ```
100
+
101
+
102
+
103
+ googlemapを表示するにはある程度の高さheightを設定していないと表示されていないように見えてしまいます。