0

I'm trying to display markers on a map using AngularJs and the Google Maps API. But, for some reason, I can't get the markers to display. I'm not sure if I'm pulling the data from the database wrong but if someone could help me out that would be great!

.controller('MapCtrl', ['$scope', '$state', '$cordovaGeolocation', '$ionicSideMenuDelegate', '$ionicModal', 'LocationService', function($scope, $state, $cordovaGeolocation, $ionicSideMenuDelegate, $ionicModal, LocationService) {
    $scope.locations = [];

    LocationService.getLocations().then(function (result) {
      $scope.locations = result.data;
    });

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    $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.name
        });

        marker.content = '<div class="infoWindowContent">' + info.name + '</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 < $scope.locations.length; i++){
        createMarker($scope.locations[i]);
    }

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

.service('LocationService', function ($http, Backand) {
  var baseUrl = '/1/objects/';
  var objectName = 'locations/';

  function getUrl() {
    return Backand.getApiUrl() + baseUrl + objectName;
  }

  function getUrlForId(id) {
    return getUrl() + id;
  }

  getLocations = function () {
    return $http.get(getUrl());
  };

  return {
    getLocations: getLocations
  }
})

how the data is stored in the database

{
     "id": 1,
      "name": "Ballentine Hall",
      "lat": 39.165935,
      "long": -86.521287
}
Improve this question
3
  • if you put console.log(info) in your createMarker function, what does an example for one iteration look like? Commented Mar 29, 2016 at 16:15
  • This angular-less port of your code into jsfiddle seems to work - maybe you should check your data? Commented Mar 29, 2016 at 16:44
  • i think you're right, I'm not getting the data. I tried putting console.log(info) in the createMarker function but nothing came up. But, when I put console.log($scope.locations) outside the function and got an empty list Commented Mar 29, 2016 at 17:08

2 Answers 2

Reset to default
1

Well, I got it to work. Pretty sure this isn't the correct/most efficient way to do it but at least its working.

So, I figured out that the createMarker function could not read the data stored in the locations variable. To fix this, I just put all the code for the map inside the function that is getting the location data from the database. That solved the issue of getting the data.

The second issue was that it wasn't getting the right data from the locations. So, in the getList function, I changed the code to this: $scope.locations = response.data.data; then everything started working. 

.controller('MapCtrl', ['$scope', '$state', '$cordovaGeolocation', '$ionicSideMenuDelegate', '$ionicModal', 'dataService', '$http', 'Backand', function($scope, $state, $cordovaGeolocation, $ionicSideMenuDelegate, $ionicModal, dataService, $http, Backand) {

  $scope.locations = [];

    dataService.getList('locations').then(function(response) {
    $scope.locations = response.data.data;

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    $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.name
        });


        marker.content = '<div class="infoWindowContent">' + info.name + '</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 < $scope.locations.length; i++){
        createMarker($scope.locations[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker){
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    } 
  });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Did you check whether you are getting data into $scope.locations by the time you call createMarker function. use console.log to see 

 for (i = 0; i < $scope.locations.length; i++){
        console.log($scope.locations);
        createMarker($scope.locations[i]);
    }

Because of javascript asynchronous nature it will go to next line and execute the program then once your promise resolves it will bind data.

Improve this answer

2 Comments

Nothing showed up in the console when I did this. So, I tried console.log($scope.locations) outside of the loop and I got an empty list. So, it seems like I'm not getting the data which doesn't make any sense because I used the same function in another controller and I was able to get the data...
resolve locations result before this state gets activated and controller is called or call your createmarkers fn on your success call of api.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.