Как задать координаты LatLng для Google Maps?

Question

[HolmesInc]

Добрый день. Столкнулся с такой проблемой. Есть код:

function load() {
          downloadUrl("getCity.php", function(data) {
          var xmlCity = data.responseXML;
          var cityMarkers = xmlCity.documentElement.getElementsByTagName("marker");
          var latCity = parseFloat(cityMarkers[0].getAttribute("lat"));
          var longCity = parseFloat(cityMarkers[0].getAttribute("lng"));
          var city = new google.maps.LatLng(latCity, longCity);
        });
          
        var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(10, 10),
            zoom: 5,
            mapTypeId: 'roadmap'
          });

        var infoWindow = new google.maps.InfoWindow;
        // Change this depending on the name of your PHP file
        downloadUrl("getLocation.php", function(data) {
          var xml = data.responseXML;
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            var html = "<b>" + name + "</b> <br/>" + address;
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: icon.icon
            });
            bindInfoWindow(marker, map, infoWindow, html);
          }
        });
      }

      function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
        });
      }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

Переменная city является локальной, и за пределами первого вызова функции downloadUrl не видна. Мне нужно вставить значения latCity и longCity в center: new google.maps.LatLng(10, 10) вместо 10 соответственно. Пробовал сделать глобальную переменную - значение просто не передаётся. Если делаю глобальные переменные, в которые помещаю значения latCity и longCity и затем вставляю их в LatLng() карта просто не загружается. Перепробовал кучу вариантов, так и не получилось задать исходную точку.

Answer 1

[Immortal_pony]

Перепишите функцию downloadUrl таким образом, чтоб она могла быть синхронной. Сейчас в момент, когда создается карта, данных о широте и долготе у скрипта еще нет.

Примерно так:

var city = new google.maps.LatLng(10, 10); // Переменную все же стоит сделать глобальной. И, возможно, присвоить ей какое-то значение по умолчанию

downloadUrl("getCity.php", function(data) {
    var xmlCity = data.responseXML;
    var cityMarkers = xmlCity.documentElement.getElementsByTagName("marker");
    var latCity = parseFloat(cityMarkers[0].getAttribute("lat"));
    var longCity = parseFloat(cityMarkers[0].getAttribute("lng"));
    city = new google.maps.LatLng(latCity, longCity); // Изменяется значение, если данные от скрипта получены
}, false); // Указание, что запрос должен быть синхронным

function downloadUrl(url, callback, async) { // Дополнительная переменная для возможности указания синхронности
    async = async || true; // Задание значения по умолчанию 
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };

    request.open('GET', url, async); // Указание синхронности запроса
    request.send(null);
}