У меня проблема с добавлением результата ответа к адресу карты Google, который показывает, что геокод не был успешным по следующей причине: INVALID_REQUEST.У меня есть скрытое текстовое поле, в которое я добавляю результат ответа адреса клиента.поэтому у каждого клиента свой адрес, поэтому, если я нажму кнопку действия, я хочу показать карту Google на модальной начальной загрузке, где маркер указывает на местоположение клиента.ниже я покажу вам, ребята, коды, которые я уже сделал.
delivery_order_reports.php
<div class="table-responsive" style="">
<table id="tables_customer_details" class="table table-striped" style="width:100%;">
<thead style="background-color:white !important; border-style:hidden !important;">
<tr style=" font-size: 14px; ">
<th>ID</th>
<th scope="col">Customer Name</th>
<th scope="col">Customer Number</th>
<th scope="col">Customer Address</th>
<th scope="col">Customer Email</th>
<th scope="col">Customer Store</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody style=" font-size:14px;">
@if(Auth::user())
@foreach($customer_full_details as $detail)
<tr>
<td>{{$detail->customer_id}}</td>
<td>{{$detail->customer_name}}</td>
<td>{{$detail->customer_number}}</td>
<td>{{$detail->customer_address}}</td>
<td>{{$detail->customer_email}}</td>
<td>{{$detail->customer_location}}</td>
<td><center><button data-toggle="modal" data-target="#getReportOrder" class="btn btn-primary report_order_report" report-data-order-id='{{$detail->order_id}}' href="#" style="color:white;"><i class="fas fa-eye"></i></button></center></td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
<script>
var customer_add = document.getElementsByClassName("hidden_customer_address").value;
var geocoder;
var map;
var address = customer_add;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
geocoder = new google.maps.Geocoder();
codeAddress(geocoder, map);
}
function codeAddress(geocoder, map) {
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Front End
$(document).ready(function(){
$('.report_order_report').click(function(){
var report_data_order_id = $(this).attr('report-data-order-id');
$.ajax({
url: '/get_report_customer_order',
type: 'GET',
dataType: 'JSON',
data: { order_id: report_data_order_id },
success: function (response) {
console.log(response);
const amount = response[0].amount;
const customer_name = response[0].customer_name;
const customer_number = response[0].customer_number;
const delivery_status = response[0].delivery_status;
const order_date = response[0].order_date;
const order_address = response[0].order_ship_address;
const transaction_number = response[0].transaction_number;
const customer_km = response[0].customer_km;
$('.hidden_customer_address').val(order_address);
$('label.report_order_detail_customer_name').html(customer_name);
$('label.report_order_detail_customer_address').html(order_address);
$('label.report_order_detail_customer_transac_number').html(transaction_number);
$('label.report_order_detail_customer_order_date_time').html(order_date);
$('label.report_order_detail_customer_km').html(customer_km);
$('label.report_order_detail_customer_total_costs').html(amount);
}
})
});
})