I have a google map with all the parking in town. It works fine.
Now, for each parking i want to ask to a JSON file if the parking is full or not.
So, during the construction of the infoWindow popup i have a json with ajax/php and if it's a success i fill the paragraphe with "open" or "close" and if it's an error with "close".
During the "success" step of the ajax, if i console.log the result, i can see "open" or "close", but in the infoWindow its always show "undefined".
I read a lot of topics, nothing helps. I think there is a DOM problem ?
Here's my javascript, again I specify, everything works, the PHP file is called, the JSON is parsed, the number of places is read and the status "open" or "closed" is returned.
However the variable "msg" returns "open" or "close" in console.log but in "return in the paragraph" it only returns "undefined"...
JS :
<script>
function placesParking(idCUS) {
var URLPHP = 'https://www.example.com/';
var urlDynamique = URLPHP + 'parkingsStatus.php';
$.ajax({
url: urlDynamique,
icon: "GET",
crossDomain: true,
cache: false,
datatype: 'json',
data: 'idCUS=' + idCUS,
success: function(msg) {
return msg;
},
error: function(msg) {
return 'Aucune information';
}
});
}
function initMap() {
var currentPopup = null;
const mapOptions = {
center: {
lat: parseFloat(<?php echo $latitude; ?>),
lng: parseFloat(<?php echo $longitude; ?>)
},
zoom: 14,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapStades"), mapOptions);
let contentString;
let infowindow;
$.getJSON("./Fichiers/JSON/France/parkings.json", function (jsonMarkers) {
$.each(jsonMarkers, function (key, data) {
let latLng = new google.maps.LatLng(data.lat, data.lng);
const imageMap = 'Design/markerParking.png';
let marker = new google.maps.Marker({
position: latLng,
map: map,
icon: imageMap
});
contentString = '<div class="gmapWrap">'
+ '<p>' + data.nom + '</p>'
+ '<p>' + data.adresse + '</p>'
+ '<p>' + placesParking(data.idCUS) + '</p>'
+ '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
marker.addListener("click", () => {
if(currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
infowindow.open({
anchor: marker,
map,
shouldFocus: false
});
currentPopup = infowindow;
});
marker.addListener(infowindow, "closeclick", function() {
currentPopup = null;
});
});
});
}
initMap();
</script>
And the php file
<?php
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Methods: GET");
header('Content-Type: application/json');
include("./Admin/MISC/system.php");
if(isset($_GET["idCUS"])) {
$idCUS = sf($_GET["idCUS"]);
$url = "https://data.strasbourg.eu/explore/dataset/occupation-parkings-temps-reel/download/?format=json&timezone=Europe/Berlin&lang=fr";
$json = file_get_contents($url);
$json = json_decode($json);
foreach($json as $line) {
$champs = $line->fields;
$idCUSParking = $champs->idsurfs;
$nomParking = $champs->nom_parking;
$etatParking = $champs->etat_descriptif;
$placesLibres = $champs->libre;
if($idCUSParking == $idCUS) {
if($etatParking == 'frequentation temps reel indisponible') {
echo json_encode('Aucune information');
} else {
echo json_encode($etatParking);
}
}
}
} else {
echo json_encode('Aucune information');
}
?>