I have successfully displayed a Google map with markers. However, I am encountering an issue when trying to dynamically set the center of the map's latitude and longitude using a method called coords(). The error message indicates that the center is undefined because the map is being drawn before the function returns or sets the centered latitude and longitude values. As a result, we are getting an undefined error. How can I ensure that the coords() function is executed completely before the map is drawn? On the other hand, I tested by hard coding the latitude value and found that the map was drawn correctly. I also attempted using callbacks but did not achieve the desired results.
Below is my controller code (js) and view (html).
var appa = angular.module('appa',['firebase','uiGmapgoogle-maps']);
appa.controller('mainCtrl', function($firebaseObject,$scope) {
$scope.coords = function(){
var ref = firebase.database().ref();
var latArray = [];
var lngArray = [];
var cenlat;
var cenlng;
var marker = [];
ref.once("value")
.then(function(snapshot)
{
snapshot.forEach(function(child)
{
latArray.push(child.child("Lat").val());
console.log(child.child("Lat").val());
lngArray.push(child.child("Long").val());
var mark = {
id: child.child("Id").val(),
coords: {
latitude: child.child("Lat").val(),
longitude: child.child("Long").val()
},
options: { title: child.child("Alt").val() }
};
marker.push(mark);
});
cenlat = (Math.max.apply(Math,latArray)+Math.min.apply(Math,latArray)/2);
cenlng = (Math.max.apply(Math,lngArray)+Math.min.apply(Math,lngArray)/2);
});
$scope.map.center.latitude = cenlat;
$scope.map.center.longitude = cenlng;
};
$scope.map = {
center:
{
latitude: 51,
longitude: 4
},
zoom: 2
};
$scope.coords();
});<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" >
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDF-sQ_g7FJ46HeYo8e4dpVukyDkdE5UXw"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.1.0/angularfire.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<script type='text/javascript' src='app.js'></script>
<style type="text/css">
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
</head>
<body ng-app="appa">
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-marker ng-repeat="m in marker" coords="m.coords" options="m.options" idkey="m.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
</html>