Я пытаюсь заставить мое приложение Google Maps ждать ответа от ajax-вызова от db-вызова с использованием php. Я знаю, что мне нужно использовать обратные вызовы, но я не уверен, как реализовать их в этом случае, поскольку геокодер api также является асинхронным.
Я пытался ответить из Как передать переменные и данные из PHP в JavaScript? и Использование gettext с Javascript из PHP через XMLHttpRequest , но я не уверен, как отредактировать его для работы с моим делом.
db.php
$mysqli = new mysqli("host", "user", "pass", "db");
(perform query)...
echo json_encode($result_assoc_array);
location.php
<html>
(html boilerplate)...
<body>
<div id="map"></div>
<script>
var map;
var homeAddress;
var oReq = new XMLHttpRequest();
oReq.onload = function() {
homeAddress = JSON.parse(this.responseText).address; //main field I want is address
};
oReq.open("get", "db.php", true);
oReq.send();
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 15,
});
var bounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
var markers = [];
geocoder.geocode({
'address': JSON.stringify(homeAddress)
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
bounds.extend(marker.position);
markers.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
(more logic)
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap&libraries=geometry" async defer></script>
</body>
</html>
Это должно дать мне карту с маркером по центру адреса из db, но вместо этого я получаю Geocode was not successful for the following reason: INVALID_REQUEST, потому что homeAddress это undefined.