Как как правельно вставить данные их JSON?

Question

[Max]

Здраствуйте помогите вывести данные из JSON файла, а точнее вставить их в нужное место.
Так я получаю данные и вывожу в консоль

request.open('GET', 'zones.json');
          request.onreadystatechange = function() {
            if ((request.status === 200) &&
                (request.readyState === 4)) {
                  info = JSON.parse(request.responseText);
                  var polygonCoords = [];
                  var coords = info.stops[0].coords[0], // Получение координат
                    length = coords.length,
                    point,
                    POSITION_X = 0,
                    POSITION_Y = 1;
                  for(var i = 0; i < length; i++){
                    point = coords[i];
                    console.log(point[POSITION_X],point[POSITION_Y]); // Тут в консоль выводятся все полученые координаты по порядку
                 }
              } 
            } 
            request.send();

Но нужно эти координаты вставить в гугл карту которая инициализируется чуток дальше. Как мне получить координаты из выше написаного кода и вставить их поочередно на места "new google.maps.LatLng" вместо вручную вбитых данных?

function initialize_map( ) {
     var latlng = new google.maps.LatLng(49.25100320801442,28.541126489672024);
     var myOptions = {
     zoom: 18,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var polygonCoords = [
      new google.maps.LatLng(49.25156346163994,28.542151093515713),
      new google.maps.LatLng(49.25113626882619,28.542376399072964),
      new google.maps.LatLng(49.25074759018555,28.541657567056973),
      new google.maps.LatLng(49.25076509829823,28.54119622710641),
      new google.maps.LatLng(49.25100320801442,28.541126489672024)
     ];
     var polygon = new google.maps.Polygon({
      path: polygonCoords,
      strokeColor: "#5196DB",
      strokeOpacity: 1,
      strokeWeight: 2,
      fillColor: "#8ab9e7",
      fillOpacity: 0.5
     });
     polygon.setMap(map);   
     return map;
   }

https://jsfiddle.net/8t7bh1rs/

Answer 1

[Алексей Рытиков]

В чем состоит проблема то? Вместо вывода в console.log, создайте массив, состоящий из объектов точек, и помещайте в него. Этот массив передайте в initialize_map() и циклом по массиву наполните polygonCoords из уже google.maps.LatLng.
Какой смысл в jsfiddle, если это запустить нельзя? Дайте примерное содержимое zones.json.
Или у вас проблема архитектуры и вы не знаете, в какую переменную сохранить полученные координаты, чтобы позже использовать ее в initialize_map()? Хоть глобальные переменные и плохая практика, вы тем не менее можете создать объект в глобальных переменных, заполнить его в onreadystatechange, а использовать в initialize_map.

Answer 2

[Игорь Русинов]

Код инициализации нужно поменять как-то так:

function initialize_map(coords) {
     var latlng = new google.maps.LatLng(49.25100320801442,28.541126489672024);
     var myOptions = {
     zoom: 18,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var length = coords.length;
    var POSITION_X = 0,
    var POSITION_Y = 1;
    var polygonCoords = [];
    for(var i = 0; i < length; i++){
        var point = coords[i];
        polygonCoords.push(new google.maps.LatLng(point[POSITION_X], point[POSITION_Y]));
        console.log();    
    }
     var polygon = new google.maps.Polygon({
      path: polygonCoords,
      strokeColor: "#5196DB",
      strokeOpacity: 1,
      strokeWeight: 2,
      fillColor: "#8ab9e7",
      fillOpacity: 0.5
     });
     polygon.setMap(map);   
     return map;
   }

И при получении координат из запроса вызвать эту функцию:

var coords = info.stops[0].coords[0]; // Получение координат
initialize_map(coords);

Исправленный вариант на jsfiddle: https://jsfiddle.net/99o1h638/