Loading address data into Google maps from a database using Angularjs

Question

I am using angularjs for my application. I am trying to load the address from the user_address table in the database and display it on the map at boot time.

Here is the script I use to download google maps

    <script async defer src="https://maps.googleapis.com/maps/api/js?
    key=myKey&callback=initMap">
    </script>

Here is the html

    <div id="map"></div>
    <div id="repeatmap" data-ng-repeat="marker in markers | orderBy :
    'title'">
    <a id="country_container" href="#" ng-
    click="openInfoWindow($event, marker)">
    <label id="namesformap" >{{marker.title}}</label></a>
    </div>

Here is Controller.js

    var DirectoryController = function($scope, $rootScope, $http,
    $location, $route,DirectoryService,HomeService,$routeParams) 
    {

    $scope.getAllCities = function()
    {
        DirectoryService.getAllCities().then(function(response){
        $scope.cities = response.data;
        console.log($scope.cities);
    })
    }

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(25,80),
        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 (var i = 0; i < $scope.cities.length; i++){
        createMarker($scope.cities[i]);
    }

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

In the getAllCities function, I get a response from the database, which is all the city names.

, , $scope.cities . : " " undefined. , $scope.cities for, , . , . , ?

Answer 1

, , , , . , /-, , .

, . :

var DirectoryController = function($scope, $rootScope, $http, $location, $route,DirectoryService, HomeService, $routeParams) 
{
    $scope.getAllCities = function()
    {
        DirectoryService.getAllCities().then(function(response){
            $scope.cities = response.data;
            console.log($scope.cities);
            setupMapMarkers();
        });
    }

    function setupMapMarkers(){
        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(25,80),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }

        $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
        $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();

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

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

    function createMarker(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);
    }  
}