AngularJS google map is not updating its content on the first view

Question

Its a single page angular app. I need to show a list of map based on the city or latitude and longitude value coming from remote.

I made a directive and kept inside an ng-repeat to display the map. My problem is the map is not getting updated on the first view. If I press a next button to show the next set of list the map start displaying its content. Even it start showing the content if I press the inspect element button. Or close the inspect element button.

my.html

<div ng-repeat="project in allProjects">
    <map-image  latitude-longitude="{{project.latlongstring}}" cityname="{{project.city.name}}" object-id="{{project.id}}">
        <div id="map_{{project.id}}" style="height: 100%;"></div>
    </map-image>
</div

My Directive link function contains the code to show the map. My.map.js

link: function(scope, iElm, iAttrs, controller) { 
    var html ="";
    var tempalate = "";
    var map;
    var geocoder;

    scope.$watchGroup(['latitudeLongitude', 'city'], function() {
             if(scope.latitudeLongitude){
InitializeMap("latitudeLongitude",scope.latitudeLongitude.split(','));

             }else if(scope.city){
                codeAddress(scope.city)
             }

    });

   function InitializeMap(param, value) {
        var latlng = new google.maps.LatLng(value[0],value[1]);
        var myOptions =
                    {
                       zoom: 8,
                       center: latlng,
                       mapTypeId: google.maps.MapTypeId.ROADMAP,
                       disableDefaultUI: true
                    };

        map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions);

    }

    var geocoder = new google.maps.Geocoder();

    function codeAddress(address) {

      geocoder.geocode({ 'address': address }, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                 InitializeMap(null, [results[0].geometry.location.G,results[0].geometry.location.K])

            }else {
                 console.log("Geocode unsuccessful");
            }
    });
 };

Have tried using

if(!scope.$$phase){
    scope.$apply();
}

after the line map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions);

But its still not working.

Answer 1

Seems like you have not bind initialize to addDomListener event. You need bind it as below

  google.maps.event.addDomListener(window, 'load', InitializeMap);

Try this,

link: function(scope, iElm, iAttrs, controller) { 
    var html ="";
    var tempalate = "";
    var map;
    var geocoder;

    scope.$watchGroup(['latitudeLongitude', 'city'], function() {
             if(scope.latitudeLongitude){
InitializeMap("latitudeLongitude",scope.latitudeLongitude.split(','));

             }else if(scope.city){
                codeAddress(scope.city)
             }

    });

   function InitializeMap(param, value) {
        var latlng = new google.maps.LatLng(value[0],value[1]);
        var myOptions =
                    {
                       zoom: 8,
                       center: latlng,
                       mapTypeId: google.maps.MapTypeId.ROADMAP,
                       disableDefaultUI: true
                    };

        map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions);

    }

    var geocoder = new google.maps.Geocoder();

    function codeAddress(address) {

      geocoder.geocode({ 'address': address }, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                 InitializeMap(null, [results[0].geometry.location.G,results[0].geometry.location.K])

            }else {
                 console.log("Geocode unsuccessful");
            }
    });

   google.maps.event.addDomListener(window, 'load', InitializeMap);
 };