回答編集履歴

3

多少DRYに

2016/10/11 08:02

投稿

退会済みユーザー
test CHANGED
@@ -498,15 +498,21 @@
498
498
 
499
499
  for (var i = 0; i < maps.length; i++) {
500
500
 
501
+
502
+
503
+ var latlng = {
504
+
505
+ lat: parseFloat(maps[i].getAttribute('data-lat'))
506
+
507
+ , lng: parseFloat(maps[i].getAttribute('data-lng'))
508
+
509
+ };
510
+
511
+
512
+
501
513
  map = new google.maps.Map(maps[i], {
502
514
 
503
- center: {
515
+ center: latlng,
504
-
505
- lat: parseFloat(maps[i].getAttribute('data-lat'))
506
-
507
- , lng: parseFloat(maps[i].getAttribute('data-lng'))
508
-
509
- },
510
516
 
511
517
  scrollwheel: false,
512
518
 
@@ -516,13 +522,7 @@
516
522
 
517
523
  new google.maps.Marker({
518
524
 
519
- position: {
525
+ position: latlng,
520
-
521
- lat: parseFloat(maps[i].getAttribute('data-lat'))
522
-
523
- , lng: parseFloat(maps[i].getAttribute('data-lng'))
524
-
525
- },
526
526
 
527
527
  map: map
528
528
 

2

修正

2016/10/11 08:02

投稿

退会済みユーザー
test CHANGED
@@ -536,7 +536,7 @@
536
536
 
537
537
  </script>
538
538
 
539
- <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDyCBb_QDbedUEbak9SQUedh1cwxek7G08&callback=initMap&language=ja"></script>
539
+ <script src="//maps.googleapis.com/maps/api/js?key=API_MEY&callback=initMap&language=ja"></script>
540
540
 
541
541
  </body>
542
542
 

1

追記

2016/10/11 05:57

投稿

退会済みユーザー
test CHANGED
@@ -3,3 +3,545 @@
3
3
 
4
4
 
5
5
  ![イメージ説明](cfc87c7d8d092979e692cb04255be0a1.png)
6
+
7
+
8
+
9
+ ---
10
+
11
+
12
+
13
+ ```php
14
+
15
+ <?php
16
+
17
+ /**
18
+
19
+ * index.php
20
+
21
+ *
22
+
23
+ * @since 2016/08/06
24
+
25
+ */
26
+
27
+ require_once './Hpepper.class.php';
28
+
29
+
30
+
31
+ /**
32
+
33
+ * エスケープ
34
+
35
+ * @param string $string
36
+
37
+ * @return string
38
+
39
+ */
40
+
41
+ function h($string)
42
+
43
+ {
44
+
45
+ return htmlspecialchars($string, ENT_QUOTES, 'utf-8');
46
+
47
+ }
48
+
49
+
50
+
51
+ // 料理カテゴリ
52
+
53
+ $food_category = Hpepper::getFoodCategory();
54
+
55
+
56
+
57
+ // 予算
58
+
59
+ $budget = Hpepper::getBudget();
60
+
61
+
62
+
63
+ // クレジットカード
64
+
65
+ $credit_card = Hpepper::getCreditCard();
66
+
67
+
68
+
69
+ // 大サービスエリア
70
+
71
+ $large_service_area = Hpepper::getLargeServiceArea();
72
+
73
+
74
+
75
+ // サービスエリア
76
+
77
+ $service_area = Hpepper::getServiceArea();
78
+
79
+
80
+
81
+ // レストラン検索
82
+
83
+ $restaurants = Hpepper::getRestaurants();
84
+
85
+ ?>
86
+
87
+ <!DOCTYPE HTML>
88
+
89
+ <html lang="ja">
90
+
91
+ <head>
92
+
93
+ <meta charset="UTF-8">
94
+
95
+ <title>ホットペッパーAPIテスト(アホでも設置するだけで動く)</title>
96
+
97
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
98
+
99
+ <style type="text/css">
100
+
101
+ .map {
102
+
103
+ height: 300px;
104
+
105
+ }
106
+
107
+ .shop {
108
+
109
+ margin-bottom: 2em;
110
+
111
+ }
112
+
113
+ .shop > div {
114
+
115
+ border: 1px solid #CCC;
116
+
117
+ padding: 1em;
118
+
119
+ }
120
+
121
+ </style>
122
+
123
+ </head>
124
+
125
+ <body>
126
+
127
+ <div class="container">
128
+
129
+ <h1>ホットペッパーAPIサンプル</h1>
130
+
131
+
132
+
133
+ <form method="get">
134
+
135
+ <div class="row">
136
+
137
+ <div class="col-md-4">
138
+
139
+ <div class="form-group">
140
+
141
+ <label for="food_category">料理カテゴリ</label>
142
+
143
+ <select class="form-control" name="food" id="food_category">
144
+
145
+ <option value="">料理カテゴリ</option>
146
+
147
+ <?php foreach ($food_category->food_category as $food_category) : ?>
148
+
149
+ <?php if ($food_category->code == filter_input(INPUT_GET, 'food')): ?>
150
+
151
+ <option value="<?= h($food_category->code); ?>" selected="selected">
152
+
153
+ <?= h($food_category->name); ?>
154
+
155
+ </option>
156
+
157
+ <?php else: ?>
158
+
159
+ <option value="<?= h($food_category->code); ?>">
160
+
161
+ <?= h($food_category->name); ?>
162
+
163
+ </option>
164
+
165
+ <?php endif; ?>
166
+
167
+ <?php endforeach; ?>
168
+
169
+ </select>
170
+
171
+ </div>
172
+
173
+
174
+
175
+ <div class="form-group">
176
+
177
+ <label for="budget">予算</label>
178
+
179
+ <select class="form-control" name="budget" id="service_area">
180
+
181
+ <option value="">予算</option>
182
+
183
+ <?php foreach ($budget->budget as $budget) : ?>
184
+
185
+ <?php if ($budget->code == filter_input(INPUT_GET, 'budget')): ?>
186
+
187
+ <option value="<?= h($budget->code); ?>" selected="selected">
188
+
189
+ <?= h($budget->name); ?>
190
+
191
+ </option>
192
+
193
+ <?php else: ?>
194
+
195
+ <option value="<?= h($budget->code); ?>">
196
+
197
+ <?= h($budget->name); ?>
198
+
199
+ </option>
200
+
201
+ <?php endif; ?>
202
+
203
+ <?php endforeach; ?>
204
+
205
+ </select>
206
+
207
+ </div>
208
+
209
+
210
+
211
+ <div class="form-group">
212
+
213
+ <label for="credit_card">クレジットカード</label>
214
+
215
+ <select class="form-control" name="credit_card" id="credit_card">
216
+
217
+ <option value="">クレジットカード</option>
218
+
219
+ <?php foreach ($credit_card->credit_card as $credit_card) : ?>
220
+
221
+ <?php if ($credit_card->code == filter_input(INPUT_GET, 'credit_card')): ?>
222
+
223
+ <option value="<?= h($credit_card->code); ?>" selected="selected">
224
+
225
+ <?= h($credit_card->name); ?>
226
+
227
+ </option>
228
+
229
+ <?php else: ?>
230
+
231
+ <option value="<?= h($credit_card->code); ?>">
232
+
233
+ <?= h($credit_card->name); ?>
234
+
235
+ </option>
236
+
237
+ <?php endif; ?>
238
+
239
+ <?php endforeach; ?>
240
+
241
+ </select>
242
+
243
+ </div>
244
+
245
+ </div>
246
+
247
+
248
+
249
+ <div class="col-md-4">
250
+
251
+ <div class="form-group">
252
+
253
+ <label for="large_service_area">大サービスエリア</label>
254
+
255
+ <select class="form-control" name="large_service_area" id="large_service_area">
256
+
257
+ <option value="">大サービスエリア</option>
258
+
259
+ <?php foreach ($large_service_area->large_service_area as $large_service_area) : ?>
260
+
261
+ <?php if ($large_service_area->code == filter_input(INPUT_GET, 'large_service_area')): ?>
262
+
263
+ <option value="<?= h($large_service_area->code); ?>" selected="selected">
264
+
265
+ <?= h($large_service_area->name); ?>
266
+
267
+ </option>
268
+
269
+ <?php else: ?>
270
+
271
+ <option value="<?= h($large_service_area->code); ?>">
272
+
273
+ <?= h($large_service_area->name); ?>
274
+
275
+ </option>
276
+
277
+ <?php endif; ?>
278
+
279
+ <?php endforeach; ?>
280
+
281
+ </select>
282
+
283
+ </div>
284
+
285
+
286
+
287
+ <div class="form-group">
288
+
289
+ <label for="service_area">サービスエリア</label>
290
+
291
+ <select class="form-control" name="service_area" id="service_area">
292
+
293
+ <option value="">サービスエリア</option>
294
+
295
+ <?php foreach ($service_area->service_area as $pref) : ?>
296
+
297
+ <?php if ($pref->code == filter_input(INPUT_GET, 'service_area')): ?>
298
+
299
+ <option value="<?= h($pref->code); ?>" selected="selected">
300
+
301
+ <?= h($pref->name); ?>
302
+
303
+ </option>
304
+
305
+ <?php else: ?>
306
+
307
+ <option value="<?= h($pref->code); ?>">
308
+
309
+ <?= h($pref->name); ?>
310
+
311
+ </option>
312
+
313
+ <?php endif; ?>
314
+
315
+ <?php endforeach; ?>
316
+
317
+ </select>
318
+
319
+ </div>
320
+
321
+ </div>
322
+
323
+
324
+
325
+ <div class="col-md-4">
326
+
327
+ <div class="form-group">
328
+
329
+ <label for="name_kana">店名 or ふりがな</label>
330
+
331
+ <input class="form-control" type="text" name="name_kana" id="name_kana" value="<?= h(filter_input(INPUT_GET, 'name_kana')); ?>" />
332
+
333
+ </div>
334
+
335
+
336
+
337
+ <div class="form-group">
338
+
339
+ <label for="keyword">フリーワード</label>
340
+
341
+ <input class="form-control" type="text" name="keyword" id="keyword" value="<?= h(filter_input(INPUT_GET, 'keyword')); ?>" />
342
+
343
+ </div>
344
+
345
+
346
+
347
+ </div>
348
+
349
+ </div>
350
+
351
+
352
+
353
+ <div class="row">
354
+
355
+ <div class="col-md-12">
356
+
357
+ <div class="form-group">
358
+
359
+ <button type="submit" class="btn btn-primary">検索</button>
360
+
361
+ </div>
362
+
363
+ </div>
364
+
365
+ </div>
366
+
367
+ </form>
368
+
369
+ <?php if (is_object($restaurants)): ?>
370
+
371
+
372
+
373
+ <p>検索結果 <?= h(number_format((int) $restaurants->results_available)); ?> 件</p>
374
+
375
+
376
+
377
+ <?php if (isset($restaurants->error)): ?>
378
+
379
+
380
+
381
+ <div>
382
+
383
+ <?php foreach ($restaurants->error as $err) : ?>
384
+
385
+ <h2><?= $err->code; ?></h2>
386
+
387
+ <p><?= $err->message; ?></p>
388
+
389
+ <?php endforeach; ?>
390
+
391
+ </div>
392
+
393
+
394
+
395
+ <?php else: ?>
396
+
397
+
398
+
399
+ <?php $i = 0; ?>
400
+
401
+ <?php foreach ($restaurants->shop as $rest) : ?>
402
+
403
+ <?php if ($i % 2 == 0): ?>
404
+
405
+ <div class="row">
406
+
407
+ <?php endif; ?>
408
+
409
+ <div class="col-md-6 shop">
410
+
411
+ <div>
412
+
413
+ <dl>
414
+
415
+ <dt>ID</dt>
416
+
417
+ <dd><?= h($rest->id); ?></dd>
418
+
419
+
420
+
421
+ <dt>店名</dt>
422
+
423
+ <dd><?= h($rest->name); ?></dd>
424
+
425
+
426
+
427
+ <dt>ジャンル</dt>
428
+
429
+ <dd><?= h($rest->genre->name); ?></dd>
430
+
431
+
432
+
433
+ <dt>所在地</dt>
434
+
435
+ <dd><?= h($rest->address); ?></dd>
436
+
437
+ </dl>
438
+
439
+ <div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>">
440
+
441
+ </div>
442
+
443
+ </div>
444
+
445
+ </div>
446
+
447
+ <?php if ($i % 2 == 1 || count($restaurants->shop) - 1 == $i): ?>
448
+
449
+ </div>
450
+
451
+ <?php endif; ?>
452
+
453
+ <?php $i++; ?>
454
+
455
+
456
+
457
+ <?php endforeach; ?>
458
+
459
+
460
+
461
+ <div class="row">
462
+
463
+ <div class="col-md-12">
464
+
465
+ <ul class="pagination pagination-sm no-margin">
466
+
467
+ <?= Hpepper::pagination($restaurants->results_available); ?>
468
+
469
+ </ul>
470
+
471
+ </div>
472
+
473
+ </div>
474
+
475
+
476
+
477
+ <?php endif; ?>
478
+
479
+ <?php endif; ?>
480
+
481
+
482
+
483
+ </div>
484
+
485
+
486
+
487
+ <script type="text/javascript" src="//www.google.com/jsapi"></script>
488
+
489
+ <script type="text/javascript">
490
+
491
+ var map;
492
+
493
+ function initMap() {
494
+
495
+ var maps = document.getElementsByClassName('map');
496
+
497
+
498
+
499
+ for (var i = 0; i < maps.length; i++) {
500
+
501
+ map = new google.maps.Map(maps[i], {
502
+
503
+ center: {
504
+
505
+ lat: parseFloat(maps[i].getAttribute('data-lat'))
506
+
507
+ , lng: parseFloat(maps[i].getAttribute('data-lng'))
508
+
509
+ },
510
+
511
+ scrollwheel: false,
512
+
513
+ zoom: 16
514
+
515
+ });
516
+
517
+ new google.maps.Marker({
518
+
519
+ position: {
520
+
521
+ lat: parseFloat(maps[i].getAttribute('data-lat'))
522
+
523
+ , lng: parseFloat(maps[i].getAttribute('data-lng'))
524
+
525
+ },
526
+
527
+ map: map
528
+
529
+ });
530
+
531
+ }
532
+
533
+
534
+
535
+ }
536
+
537
+ </script>
538
+
539
+ <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDyCBb_QDbedUEbak9SQUedh1cwxek7G08&callback=initMap&language=ja"></script>
540
+
541
+ </body>
542
+
543
+ </html>
544
+
545
+
546
+
547
+ ```