Loading address data into google maps from database using Angularjs

Question

I am using angularjs for my application.I am trying to load the address from user_address table in database and display it on map on load.

Here is the script i am using to load google maps

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

Here is the 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>

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

In getAllCities function i am getting response from database that is all the names of cities.

As you can see in console i am able to get the response from database but i am not able to get $scope.cities value to for loop.It is saying Cannot read property 'length' of undefined.Can anyone tell how can i get value of $scope.cities into for loop so that in map i can display the cities returned from database.Now i am able to display map but with no cities and no markers.I dont know whether it will work or not or am i doing the wrong way?

Since the request from the database is probably asynchronous, perhaps the response hasn't been resolved before you try to add your markers. Try waiting with setting up the map until after your data has been resolved (i.e. call your map setup code from the then-callback). — Nikolaj Dam Larsen
– Nikolaj Dam Larsen, Commented Sep 28, 2017 at 5:58
Can u please elaborate on this? Now i am getting all cities as response from database — Sachin HR
– Sachin HR, Commented Sep 28, 2017 at 6:01
Put all the code shown in your Controller.js snippet into a function (I can't tell from the code you've shared whether you already do this). Call that function from within the then-function. If it's not clear enough, I ask you to add a bit more code to your snippets, in order to see the context this code is executed in. — Nikolaj Dam Larsen
– Nikolaj Dam Larsen, Commented Sep 28, 2017 at 6:02
I have updated my question.I have added entire controller i am using — Sachin HR
– Sachin HR, Commented Sep 28, 2017 at 6:12

Nikolaj Dam Larsen · Accepted Answer · 2017-09-28 06:20:56Z

1

This is most likely because you're trying to add the markers before the request to the database has finished resolving. This happens because the database/webservice request is most likely executed asynchronously.

Instead run the code for setting up the markers, when your promise from the database request have resolved. Like this:

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

answered Sep 28, 2017 at 6:20

Nikolaj Dam Larsen

5,7146 gold badges37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sachin HR Over a year ago

I tried with this code.But the map itself not displaying

Nikolaj Dam Larsen Over a year ago

That's probably an entirely different problem. Do you get any errors in the console?

Sachin HR Over a year ago

No errors.simply displaying empty.previously it was loading google maps.

Sachin HR Over a year ago

It is displaying that initMap is not a function

Nikolaj Dam Larsen Over a year ago

That question is a bit outside the scope of the original question - which I assume have been resolved? This tangent question is a bit difficult to answer without sitting with the code myself, can you perhaps produce a Plunker or similar, with a minimal sample that shows this new problem?

|

Collectives™ on Stack Overflow

Loading address data into google maps from database using Angularjs

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related