CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3
user2133623
user2133623

Reputation:

AngularJs and Google Maps Issue: Not displaying markers?

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
}

Upvotes: 0

Views: 117

Answers (2)

user2133623
user2133623

Reputation:

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

Upvotes: 1

Venkat
Venkat

Reputation: 551

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.

Upvotes: 0

Related Questions