Help with a $ scope and data from a database on google maps

0

I have a problem and I do not know how to use a scope variable and show it on the map, it does not recognize the location

/**
 * Created by gamba on 20/10/2016.
 */
var app = angular.module("mapas",[]);

app.controller("myctrl",function ($scope,$http) {
    //CONEXION
    $scope.coordenadas=[];
    var url = "http://192.168.137.11:8000/conductores/";
    $http({
        method: 'GET',
        url: url
    }).then (function successCallback(data) {
        $scope.coordenadas=data;
    },function errorCallback(err) {
        console.log("No funciona la conexion");
    });
    //GOOGLE MAPS API CODE
    var cities = [
        $scope.coordenadas[1].ubicacion,
        $scope.coordenadas[2].ubicacion
    ];
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();

    var createMarker = function (info){

        var marker = new google.maps.Marker({
            map: $scope.map,
            position: new google.maps.LatLng(info.lat, info.long),
            title: info.city
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });

        $scope.markers.push(marker);

    }

    for (i = 0; i < cities.length; i++){
        createMarker(cities[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }
});

I get an error when doing the $ scope.coordenadas [1] .location.

What is entered as coordinate.location obtained is "SRID = 4326; POINT (-77.05810546875 -12.093200683594)" for example.

    
asked by Anthony Rosas 07.12.2016 в 00:49
source

1 answer

0

The $http call is asynchronous. You have to execute your code from the successCallback which is where you are assigning the data of GET :

$scope.coordenadas=data;

Asi:

.then (function successCallback(data) {
    $scope.coordenadas=data;
    var cities = [
        $scope.coordenadas[1].ubicacion,
        $scope.coordenadas[2].ubicacion
    ];

    // demas codigo
},
    
answered by 07.12.2016 в 00:59