回答編集履歴
7
型変換処理追加
answer
CHANGED
|
@@ -84,8 +84,9 @@
|
|
|
84
84
|
// 各要素（map）に対して関数を一回ずつ実行
|
|
85
85
|
Array.prototype.forEach.call(elements, function (map) {
|
|
86
86
|
// 緯度経度を取得
|
|
87
|
+
// + をつけて数値へ変換
|
|
87
|
-
var lat = map.dataset.lat;
|
|
88
|
+
var lat = +map.dataset.lat;
|
|
88
|
-
var lng = map.dataset.lng;
|
|
89
|
+
var lng = +map.dataset.lng;
|
|
89
90
|
|
|
90
91
|
// 地図とマーカーの初期化
|
|
91
92
|
var marker = new google.maps.Marker({
|
6
文法修正
answer
CHANGED
|
@@ -95,8 +95,8 @@
|
|
|
95
95
|
center: new google.maps.LatLng(lat, lng),
|
|
96
96
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
97
97
|
scaleControl: true,
|
|
98
|
-
},
|
|
98
|
+
}),
|
|
99
|
-
});
|
|
99
|
+
});
|
|
100
100
|
});
|
|
101
101
|
</script>
|
|
102
102
|
</body>
|
5
Protocol
answer
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
// ロジック（出力の絡まない処理）はページ先頭で処理
|
|
36
|
-
$url = '
|
|
36
|
+
$url = 'https://webservice.recruit.co.jp/hotpepper/gourmet/v1/?';
|
|
37
37
|
$xml = simplexml_load_file($url . http_build_query(array(
|
|
38
38
|
'key' => 'my key',
|
|
39
39
|
'count' => 10,
|
4
ユニークな ID を設定するよう修正
answer
CHANGED
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
<tr>
|
|
67
67
|
<td>
|
|
68
68
|
<!-- data-lat と data-lng に緯度経度情報を保存 -->
|
|
69
|
-
<div class="map" data-lat="<?= h($r->lat) ?>" data-lng="<?= h($r->lng) ?>" style="width: 500px; height: 370px; border: 1px solid gray;"></div>
|
|
69
|
+
<div id="shop-<?= $r->id ?>" class="map" data-lat="<?= h($r->lat) ?>" data-lng="<?= h($r->lng) ?>" style="width: 500px; height: 370px; border: 1px solid gray;"></div>
|
|
70
70
|
</td>
|
|
71
71
|
</tr>
|
|
72
72
|
<tr>
|
|
@@ -78,8 +78,8 @@
|
|
|
78
78
|
?>
|
|
79
79
|
<script src="https://maps.google.com/maps/api/js?key=My Key&sensor=false"></script>
|
|
80
80
|
<script>
|
|
81
|
-
//
|
|
81
|
+
// ID に shop- がついている要素をすべて取得
|
|
82
|
-
var elements = document.
|
|
82
|
+
var elements = document.querySelectorAll("[id^='shop-']");
|
|
83
83
|
|
|
84
84
|
// 各要素（map）に対して関数を一回ずつ実行
|
|
85
85
|
Array.prototype.forEach.call(elements, function (map) {
|
3
短縮
answer
CHANGED
|
@@ -87,18 +87,15 @@
|
|
|
87
87
|
var lat = map.dataset.lat;
|
|
88
88
|
var lng = map.dataset.lng;
|
|
89
89
|
|
|
90
|
-
// 地図の初期化
|
|
91
|
-
var mapObj = new google.maps.Map(map, {
|
|
92
|
-
zoom: 12,
|
|
93
|
-
center: new google.maps.LatLng(lat, lng),
|
|
94
|
-
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
95
|
-
scaleControl: true,
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
// マーカーの初期化
|
|
90
|
+
// 地図とマーカーの初期化
|
|
99
|
-
var
|
|
91
|
+
var marker = new google.maps.Marker({
|
|
100
92
|
position: { lat: lat, lng: lng },
|
|
93
|
+
map: new google.maps.Map(map, {
|
|
101
|
-
|
|
94
|
+
zoom: 12,
|
|
95
|
+
center: new google.maps.LatLng(lat, lng),
|
|
96
|
+
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
97
|
+
scaleControl: true,
|
|
98
|
+
},
|
|
102
99
|
});
|
|
103
100
|
});
|
|
104
101
|
</script>
|
2
ケツカンマ教
answer
CHANGED
|
@@ -88,17 +88,17 @@
|
|
|
88
88
|
var lng = map.dataset.lng;
|
|
89
89
|
|
|
90
90
|
// 地図の初期化
|
|
91
|
-
var mapObj = new google.maps.Map(map, {
|
|
91
|
+
var mapObj = new google.maps.Map(map, {
|
|
92
|
-
zoom: 12,
|
|
92
|
+
zoom: 12,
|
|
93
|
-
center: new google.maps.LatLng(lat, lng),
|
|
93
|
+
center: new google.maps.LatLng(lat, lng),
|
|
94
|
-
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
94
|
+
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
95
|
-
scaleControl: true
|
|
95
|
+
scaleControl: true,
|
|
96
96
|
});
|
|
97
97
|
|
|
98
98
|
// マーカーの初期化
|
|
99
|
-
var marke = new google.maps.Marker({
|
|
99
|
+
var marke = new google.maps.Marker({
|
|
100
|
-
position: { lat: lat, lng: lng },
|
|
100
|
+
position: { lat: lat, lng: lng },
|
|
101
|
-
map: mapObj
|
|
101
|
+
map: mapObj,
|
|
102
102
|
});
|
|
103
103
|
});
|
|
104
104
|
</script>
|
1
いらないとこ削った
answer
CHANGED
|
@@ -48,7 +48,6 @@
|
|
|
48
48
|
<?php
|
|
49
49
|
exit;
|
|
50
50
|
}
|
|
51
|
-
$total_count = $xml->results_available;
|
|
52
51
|
?>
|
|
53
52
|
<!DOCTYPE html>
|
|
54
53
|
<html>
|
|
@@ -97,8 +96,8 @@
|
|
|
97
96
|
});
|
|
98
97
|
|
|
99
98
|
// マーカーの初期化
|
|
100
|
-
var
|
|
99
|
+
var marke = new google.maps.Marker({
|
|
101
|
-
position: { lat: lat, lng: lng},
|
|
100
|
+
position: { lat: lat, lng: lng },
|
|
102
101
|
map: mapObj
|
|
103
102
|
});
|
|
104
103
|
});
|