Angularjsを使用してデータベースからGoogleマップにアドレスデータをロード

Question

私はアプリケーションにanglejsを使用しています。データベースのuser_addressテーブルからアドレスをロードし、ロード時に地図上に表示しようとしています。

ここで私は、Googleが

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

をマップロードするために使用していたスクリプトは、ここでの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> 

ここgetAllCities関数Iに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'); 
     } 
    } 

ですされますすべての都市名であるデータベースからの応答を得ています。

コンソールで見ることができるように私は、データベースからの応答を取得することができるが、私はloop.Itのために$ scope.cities値を取得することはできないですが、誰もが言うundefined.Canの「長さ」プロパティを読み取ることができませんと言っていますどのように私は$ scope.citiesの値を取得することができますので、地図で私は都市を表示することができますdatabase.Now都市からの都市を表示することができますがマークなし。私はそれが動作するかどうかはわかりません私は間違ったやり方をしていますか？

Answer 1

これは、データベースへの要求が解決される前にマーカーを追加しようとしているためです。これは、データベース/ Webサービス要求が非同期で実行される可能性が最も高いために発生します。

代わりに、データベースリクエストからの約束が解決されたときにマーカーを設定するコードを実行します。

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); 
    } 
}