質問編集履歴
3
jsコード記述
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -112,12 +112,7 @@
|
|
|
112
112
|
現在のjsコード
|
|
113
113
|
```
|
|
114
114
|
<div id='map'></div>
|
|
115
|
-
|
|
115
|
+
|
|
116
|
-
#map{
|
|
117
|
-
height: 750px;
|
|
118
|
-
width: 100%;
|
|
119
|
-
}
|
|
120
|
-
</style>
|
|
121
116
|
<script>
|
|
122
117
|
let map
|
|
123
118
|
|
|
@@ -144,9 +139,45 @@
|
|
|
144
139
|
<% end %>
|
|
145
140
|
}
|
|
146
141
|
</script>
|
|
147
|
-
<script src="https://maps.googleapis.com/maps/api/js?key=
|
|
142
|
+
<script src="https://maps.googleapis.com/maps/api/js?key=｛｝&callback=initMap" async defer></script>
|
|
148
143
|
```
|
|
149
144
|
|
|
145
|
+
投稿した後のjsコード
|
|
146
|
+
```
|
|
147
|
+
<script>
|
|
148
|
+
let map
|
|
149
|
+
|
|
150
|
+
function initMap(){
|
|
151
|
+
geocoder = new google.maps.Geocoder()
|
|
152
|
+
|
|
153
|
+
map = new google.maps.Map(document.getElementById('map'), {
|
|
154
|
+
center: {lat: 35.68123620000001, lng:139.7671248},
|
|
155
|
+
zoom: 12,
|
|
156
|
+
});
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
(function(){
|
|
160
|
+
var contentString = "住所：東京都葛飾区青戸３丁目３３−１６";
|
|
161
|
+
|
|
162
|
+
var marker = new google.maps.Marker({
|
|
163
|
+
position:{lat: , lng: },
|
|
164
|
+
map: map,
|
|
165
|
+
title: contentString
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
})();
|
|
169
|
+
(function(){
|
|
170
|
+
var contentString = "住所：葛飾区";
|
|
171
|
+
|
|
172
|
+
var marker = new google.maps.Marker({
|
|
173
|
+
position:{lat: , lng: },
|
|
174
|
+
map: map,
|
|
175
|
+
title: contentString
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
})();
|
|
179
|
+
}
|
|
180
|
+
```
|
|
150
181
|
現在のコンソールの状態
|
|
151
182
|
|
|
152
183
|
|
2
jsコード記述
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -109,6 +109,44 @@
|
|
|
109
109
|
</div>
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
+
現在のjsコード
|
|
113
|
+
```
|
|
114
|
+
<div id='map'></div>
|
|
115
|
+
<style>
|
|
116
|
+
#map{
|
|
117
|
+
height: 750px;
|
|
118
|
+
width: 100%;
|
|
119
|
+
}
|
|
120
|
+
</style>
|
|
121
|
+
<script>
|
|
122
|
+
let map
|
|
123
|
+
|
|
124
|
+
function initMap(){
|
|
125
|
+
geocoder = new google.maps.Geocoder()
|
|
126
|
+
|
|
127
|
+
map = new google.maps.Map(document.getElementById('map'), {
|
|
128
|
+
center: {lat: 35.68123620000001, lng:139.7671248},
|
|
129
|
+
zoom: 12,
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
<% @noodles.each do |t| %>
|
|
134
|
+
(function(){
|
|
135
|
+
var contentString = "住所：<%= t.address %>";
|
|
136
|
+
|
|
137
|
+
var marker = new google.maps.Marker({
|
|
138
|
+
position:{lat: <%= t.latitude %>, lng: <%= t.longitude %>},
|
|
139
|
+
map: map,
|
|
140
|
+
title: contentString
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
})();
|
|
144
|
+
<% end %>
|
|
145
|
+
}
|
|
146
|
+
</script>
|
|
147
|
+
<script src="https://maps.googleapis.com/maps/api/js?key=□□□□□&callback=initMap" async defer></script>
|
|
148
|
+
```
|
|
149
|
+
|
|
112
150
|
現在のコンソールの状態
|
|
113
151
|
|
|
114
152
|
|
1
コンソールの状態（すべての仕様を行ったらこのようなコードがでてきました…）
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -109,7 +109,10 @@
|
|
|
109
109
|
</div>
|
|
110
110
|
```
|
|
111
111
|
|
|
112
|
+
現在のコンソールの状態
|
|
113
|
+
|
|
112
114
|
|
|
115
|
+
|
|
113
116
|
### 参考記事
|
|
114
117
|
[【Rails6 / Google Map API】住所を投稿してマップに複数マーカーを立てる](https://qiita.com/kaiyukun/items/3ab083282872937b1fa5)
|
|
115
118
|
|