2017-06-12 3 views
1

私は、各市民がそれらを収集する場所について当局に知らせることができる嵩張る廃棄物の表示を含むアプリケーションを開発しています。Firebase&Googleマップ - データを読み取り、マーカーを作成します。オブジェクトの読み方は?

Datas(住所と座標)はfirebaseに保管されています。私はGoogleマップのマーカーの表示に取り組んでいます。ここで

はコードです:

jQuery(function($) { 
    // Asynchronously Load the map API 
    var script = document.createElement('script'); 
    script.src = "//maps.googleapis.com/maps/api/js?&callback=initialize"; 
    document.body.appendChild(script); 
}); 

function initialize() { 
    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     mapTypeId: 'roadmap' 
    }; 

    // Display a map on the page 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    map.setTilt(45); 

    markers: findMarkers(); 

    console.log(markers); 
    console.log(markers.length); 

    // Info Window Content 
    var infoWindowContent = [ 
     ['<div class="info_content">' + 
     '<p>' + 'adresse' +'</p>' +  '</div>'], 
    ]; 

    // Display multiple markers on a map 
    var infoWindow = new google.maps.InfoWindow(), marker, i; 

    // Loop through our array of markers & place each one on the map 
    for(i = 0; i < markers.length; i++) { 
     var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng()); 
     bounds.extend(position); 
     marker = new google.maps.Marker({ 
      position: position, 
      map: map, 
      title: markers[i][0] 
     }); 

     // Allow each marker to have an info window  
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infoWindow.setContent(infoWindowContent[i][0]); 
       infoWindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
     this.setZoom(14); 
     google.maps.event.removeListener(boundsListener); 
    });  
} 
function findMarkers(){ 

    markers = []; 

    var data = firebase.database(); 

    var dataRef = firebase.database().ref("signalement/"); 
    dataRef.on("child_added", function(data) { 
     var key = data.key; 
     const signalement = data.val(); 
     const adresse = signalement.adresse; 
     const coordonnees = signalement.coordonnees; 
     var marker = [adresse, coordonnees]; 
     markers.push(marker); 
    }); 

    // Multiple Markers 
    return markers; 

} 

</script> 
</head> 
<body> 
<div id="map_wrapper"> 
    <div id="map_canvas" class="mapping"></div> 
</div> 
</html> 

問題は0に等しいconsole.log(markers.length);から来ています!前のconsole.log(markers);にオブジェクトが表示されています。

多分、varマーカーの構文エラーですか?とにかく 誰かがこのケースで私を助ける?

ありがとうございました

答えて

0

firebaseデータコールバックに問題があるようです。 google map apiのコールバックを設定しているので、マーカーデータはファンクションを実行するまでにファイヤーベースから準備が整っていません。

私はむしろfirebaseコールバックがロードされているGoogleマップスクリプトよりも遅くなります(&マップはfirebaseのデータに依存しています)。

jQuery(function($) { 
    // Asynchronously Load the map API 
    var script = document.createElement('script'); 
    script.src = "//maps.googleapis.com/maps/api/js?&callback=findMarkers"; 
    document.body.appendChild(script); 
}); 

function initialize(markers) { 
    var map; 
    var bounds = new google.maps.LatLngBounds(); 
    var mapOptions = { 
     mapTypeId: 'roadmap' 
    }; 

    // Display a map on the page 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    map.setTilt(45); 

    console.log(markers); 
    console.log(markers.length); 

    // Info Window Content 
    var infoWindowContent = [ 
     ['<div class="info_content">' + 
     '<p>' + 'adresse' +'</p>' +  '</div>'], 
    ]; 

// Display multiple markers on a map 
var infoWindow = new google.maps.InfoWindow(), marker, i; 

// Loop through our array of markers & place each one on the map 
for(i = 0; i < markers.length; i++) { 
    var position = new google.maps.LatLng(markers[i][1].lat(), markers[i][1].lng()); 
    bounds.extend(position); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: markers[i][0] 
    }); 

    // Allow each marker to have an info window  
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      infoWindow.open(map, marker); 
     } 
    })(marker, i)); 
} 
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
    this.setZoom(14); 
    google.maps.event.removeListener(boundsListener); 
});  
} 

function findMarkers(){ 

    markers = []; 

    var data = firebase.database(); 

    var dataRef = firebase.database().ref("signalement/"); 
    dataRef.on("child_added", function(data) { 
     var key = data.key; 
     const signalement = data.val(); 
     const adresse = signalement.adresse; 
     const coordonnees = signalement.coordonnees; 
     var marker = [adresse, coordonnees]; 
     markers.push(marker); 
    }); 

    // send prepared marker array to map initialize function 
    intialize(markers); 
} 
関連する問題