Skip to content

Commit 155f188

Browse files
abr4xasabr4xas
committed
Fixed what needed fixing and squished some bugs. 🐛
2 parents 1902a5f + c332763 commit 155f188

File tree

7 files changed

+132
-77
lines changed

7 files changed

+132
-77
lines changed

‎.idea/.gitignore‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/gmaps-input-backpack.iml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/php.xml‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎composer.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"authors": [
66
{
77
"name": "angel cruz",
8-
"email": "[email protected]",
8+
"email": "[email protected]",
99
"homepage": "https://angelcruz.dev",
1010
"role": "Developer"
1111
}

‎src/resources/views/fields/customGoogleMaps.blade.php‎

Lines changed: 79 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<label>{!! $field['label'] !!}</label>
55
<input type="text" id="{{ $field['name'] }}" name="{{ $field['name'] }}"
66
value="{{ old($field['name']) ? old($field['name']) : (isset($field['value']) ? $field['value'] : (isset($field['default']) ? $field['default'] : '' )) }}"
7-
@include('crud::fields.inc.attributes')>
8-
<input type="hidden" name="address_latitude" id="address-latitude" value="0" />
9-
<input type="hidden" name="address_longitude" id="address-longitude" value="0" />
7+
@include('crud::fields.inc.attributes')>
8+
<input type="hidden" name="address_latitude" id="address-latitude" value="{{ $crud->entry?->address_latitude }}" />
9+
<input type="hidden" name="address_longitude" id="address-longitude"
10+
value="{{ $crud->entry?->address_longitude }}" />
1011
<div id="address-map-container" style="width:100%;height:400px; ">
1112
<div style="width: 100%; height: 100%" id="address-map"></div>
1213
</div>
@@ -18,7 +19,7 @@
1819
</div>
1920
@include('crud::fields.inc.wrapper_end')
2021
@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))
21-
{{-- FIELD EXTRA CSS --}}
22+
{{-- FIELD EXTRA CSS --}}
2223
{{-- push things in the after_styles section --}}
2324

2425
@push('crud_fields_styles')
@@ -31,89 +32,91 @@
3132
@push('crud_fields_scripts')
3233
<!-- no scripts -->
3334
<script
34-
src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initialize" async defer></script>
35-
<script>
36-
function initialize() {
37-
38-
$('form').on('keyup keypress', function(e) {
39-
var keyCode = e.keyCode || e.which;
40-
if (keyCode === 13) {
41-
e.preventDefault();
42-
return false;
43-
}
44-
});
45-
const locationInputs = document.getElementsByClassName("map-input");
35+
src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initialize"
36+
async defer></script>
37+
<script>
38+
function initialize() {
39+
40+
$('form').on('keyup keypress', function (e) {
41+
var keyCode = e.keyCode || e.which;
42+
if (keyCode === 13) {
43+
e.preventDefault();
44+
return false;
45+
}
46+
});
47+
const locationInputs = document.getElementsByClassName("map-input");
4648
47-
const autocompletes = [];
48-
const geocoder = new google.maps.Geocoder;
49-
for (let i = 0; i < locationInputs.length; i++) {
49+
const autocompletes = [];
50+
const geocoder = new google.maps.Geocoder;
51+
for (let i = 0; i < locationInputs.length; i++) {
5052
51-
const input = locationInputs[i];
52-
const fieldKey = input.id.replace("-input", "");
53-
const isEdit = document.getElementById(fieldKey + "-latitude").value != '' && document.getElementById(fieldKey + "-longitude").value != '';
53+
const input = locationInputs[i];
54+
const fieldKey = input.id.replace("-input", "");
55+
console.log(document.getElementById(fieldKey + "-latitude-hidden").value);
56+
const isEdit = document.getElementById(fieldKey + "-latitude-hidden").value != '' && document.getElementById(fieldKey + "-longitude-hidden").value != '';
5457
55-
const latitude = parseFloat(document.getElementById(fieldKey + "-latitude").value) || -33.8688;
56-
const longitude = parseFloat(document.getElementById(fieldKey + "-longitude").value) || 151.2195;
58+
const latitude = parseFloat(document.getElementById(fieldKey + "-latitude-hidden").value) || -33.8688;
59+
const longitude = parseFloat(document.getElementById(fieldKey + "-longitude-hidden").value) || 151.2195;
5760
58-
const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
59-
center: {lat: latitude, lng: longitude},
60-
zoom: 13
61-
});
62-
const marker = new google.maps.Marker({
63-
map: map,
64-
position: {lat: latitude, lng: longitude},
65-
});
61+
const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
62+
center: {lat: latitude, lng: longitude},
63+
zoom: 13
64+
});
65+
const marker = new google.maps.Marker({
66+
map: map,
67+
position: {lat: latitude, lng: longitude},
68+
});
6669
67-
marker.setVisible(isEdit);
70+
marker.setVisible(isEdit);
6871
69-
const autocomplete = new google.maps.places.Autocomplete(input);
70-
autocomplete.key = fieldKey;
71-
autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});
72-
}
72+
const autocomplete = new google.maps.places.Autocomplete(input);
73+
autocomplete.key = fieldKey;
74+
autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});
75+
}
7376
74-
for (let i = 0; i < autocompletes.length; i++) {
75-
const input = autocompletes[i].input;
76-
const autocomplete = autocompletes[i].autocomplete;
77-
const map = autocompletes[i].map;
78-
const marker = autocompletes[i].marker;
79-
80-
google.maps.event.addListener(autocomplete, 'place_changed', function () {
81-
marker.setVisible(false);
82-
const place = autocomplete.getPlace();
83-
84-
geocoder.geocode({'placeId': place.place_id}, function (results, status) {
85-
if (status === google.maps.GeocoderStatus.OK) {
86-
const lat = results[0].geometry.location.lat();
87-
const lng = results[0].geometry.location.lng();
88-
setLocationCoordinates(autocomplete.key, lat, lng);
77+
for (let i = 0; i < autocompletes.length; i++) {
78+
const input = autocompletes[i].input;
79+
const autocomplete = autocompletes[i].autocomplete;
80+
const map = autocompletes[i].map;
81+
const marker = autocompletes[i].marker;
82+
83+
google.maps.event.addListener(autocomplete, 'place_changed', function () {
84+
marker.setVisible(false);
85+
const place = autocomplete.getPlace();
86+
87+
geocoder.geocode({'placeId': place.place_id}, function (results, status) {
88+
if (status === google.maps.GeocoderStatus.OK) {
89+
const lat = results[0].geometry.location.lat();
90+
const lng = results[0].geometry.location.lng();
91+
setLocationCoordinates(autocomplete.key, lat, lng);
92+
}
93+
});
94+
95+
if (!place.geometry) {
96+
window.alert("No details available for input: '" + place.name + "'");
97+
input.value = "";
98+
return;
8999
}
90-
});
91100
92-
if (!place.geometry) {
93-
window.alert("No details available for input: '" + place.name + "'");
94-
input.value = "";
95-
return;
96-
}
101+
if (place.geometry.viewport) {
102+
map.fitBounds(place.geometry.viewport);
103+
} else {
104+
map.setCenter(place.geometry.location);
105+
map.setZoom(17);
106+
}
107+
marker.setPosition(place.geometry.location);
108+
marker.setVisible(true);
97109
98-
if (place.geometry.viewport) {
99-
map.fitBounds(place.geometry.viewport);
100-
} else {
101-
map.setCenter(place.geometry.location);
102-
map.setZoom(17);
103-
}
104-
marker.setPosition(place.geometry.location);
105-
marker.setVisible(true);
110+
});
111+
}
112+
}
106113
107-
});
114+
function setLocationCoordinates(key, lat, lng) {
115+
const latitudeField = document.getElementById(key + "-" + "latitude");
116+
const longitudeField = document.getElementById(key + "-" + "longitude");
117+
latitudeField.value = lat;
118+
longitudeField.value = lng;
108119
}
109-
}
110-
111-
function setLocationCoordinates(key, lat, lng) {
112-
const latitudeField = document.getElementById(key + "-" + "latitude");
113-
const longitudeField = document.getElementById(key + "-" + "longitude");
114-
latitudeField.value = lat;
115-
longitudeField.value = lng;
116-
}
117-
</script>
120+
</script>
118121
@endpush
119122
@endif

0 commit comments

Comments
 (0)