В моем коде я хочу проанализировать данные JSON и показать информационные окна Google Карт, но когда я конвертирую через функцию JSON.parse()
и передаю ее как переменную информацию, информационные окна карт не будут работать должным образом, но когда я использую функцию JSON.parse
чтобы преобразовать и отобразить результат в textarea
, затем поместить преобразованные значения вручную, он правильно отображает информационные окна
Вот что я возвращаю через AJAX / JSON Raw
[
"['<div class=\"info_content\"><h3>test 1<\/h3><h4>Contact: 33<\/h4><p>33<\/p><\/div>']",
"['<div class=\"info_content\"><h3>test 2<\/h3><h4>Contact: 22<\/h4><p>22<\/p><\/div>']",
"['<div class=\"info_content\"><h3>test 3<\/h3><h4>Contact: 55<\/h4><p>55<\/p><\/div>']"
]
Это то, что мне нужно дляdisplay infowindows
[
['<div class="info_content"><h3>test 1</h3><h4>Contact: 33</h4><p>33</p></div>'],
['<div class="info_content"><h3>test 2</h3><h4>Contact: 22</h4><p>22</p></div>'],
['<div class="info_content"><h3>test 3</h3><h4>Contact: 55</h4><p>55</p></div>']
]
Это моя часть JS, которая создает проблему
//Ajax Success response
var location_box = JSON.parse(response);
var infoWindowContent = location_box;
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;
Полный код JS
<script>
var markers = [];
function initMap(location_data, location_box) {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
center: new google.maps.LatLng(54.57951, -4.41387),
};
// Display a map on the web page
map = new google.maps.Map(document.getElementById("map"), mapOptions);
map.setTilt(50);
// Multiple markers location, latitude, and longitude
//alert(location_data);
var markers = location_data;
//var markers = [['test 1', 25.1212, 55.1535, 5],['test 2', 25.2084, 55.2719, 6],['test 3', 25.2285, 55.3273, 7]];
var infoWindowContent = location_box;
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(),
marker, i;
// Place each marker on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Add info window to marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(15);
google.maps.event.removeListener(boundsListener);
});
}
$(document).ready(function() {
var location_data;
$("#mapped").on("change", function() {
var dataname = $(".selectpicker option:selected").val();
$.ajax({
url: "findforwork.php",
type: "POST",
data: "searchid=" + dataname,
success: function(response) {
//alert('Success' + response);
var str_response = response;
var res_new = str_response.split("==============");
var location_data = JSON.parse(res_new[0].replace(/\"/g, "").replace(/\'/g, "\""));
var location_box = res_new[1]; // Info windows Array will be here
$('#infoBx').val(location_box);
var mapDiv = document.getElementById('map');
google.maps.event.addDomListener(mapDiv, "load", initMap(location_data, location_box));
}
}); //End Of Ajax
}); //End of mapped
});
</script>
PHP-код для генерации данных JSON
$locations = array();
$locas = array();
$infoDialog = array();
if (is_numeric($_POST['searchid'])) {
$service_id = $_POST['searchid'];
$query = "SELECT * FROM tblemployees WHERE FIND_IN_SET($service_id, service)";
if (!$result = mysqli_query($conn, $query)) {
exit(mysqli_error($conn));
}
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_array($result)) {
// username is already exist
$print_info = null;
$latitude = $row['ltd'];
$longitude = $row['lotd'];
$person_name = $row['fullname'];
$person_id = $row['id'];
$person_contact = $row['contact'];
$person_address = $row['address'];
$locations[] = array(
'name' => $person_name,
'lat' => $latitude,
'lng' => $longitude,
'lnk' => $person_id
);
$locas[] = "['" . $person_name . "', " . $latitude . ", " . $longitude . ", " . $person_id . "]";
$print_info .= '<div class="info_content">';
$print_info .= '<h3>' . $person_name . '</h3>';
$print_info .= '<h4>Contact: ' . $person_contact . '</h4>';
$print_info .= '<p>' . $person_address . '</p>';
$print_info .= '</div>';
$infoDialog[] = "['" . $print_info . "']";
}
}
$json_response = json_encode($locas);
$json_info = json_encode($infoDialog);
echo $json_response . "==============" . $json_info;
}