angularjs googlemap not loading when trying to load in a modal

Question

I am using AngularJS google maps to display map with markers.

The scenario is :

Initially Contact Details like Door no, Street, Area etc fields page will be displayed along with a static map. Once an edit button is clicked a pop-up with all the fields and map is displayed. ex:

CODE:

html

                    <div class="row" ng-controller="userProfileController">
                        <ui-gmap-google-map center="center1" zoom="zoom1" pan="true" events="events">
                        <ui-gmap-markers models="models1" coords="'self'" options="'options'"></ui-gmap-markers>
                        </ui-gmap-google-map>
                    </div>

controller

                            $scope.center1 = {
                            latitude: lat,
                            longitude: lng
                        }; 


                        $scope.zoom1 = 8;

                        $scope.models1 = [{
                                        id: 11445522,
                                        latitude: lat,
                                        longitude: lng,
                                        options: {
                                                   title: "Current Location"
                                        }
                                        }];

Well everything works fine so far.

When edit is clicked i am trying to load another html in the modal that contains fields and a map. This time the map isn't loading. if I press 'F12' then map can be seen.

Code for popup:

html

    <div class="col-sm-12">
        <ui-gmap-google-map center="center3" zoom="zoom3" pan="true" events="events3" refresh="true">
            <ui-gmap-markers doRebuildAll="true" doCluster="true" models="models3" coords="'self'" options="'options'"></ui-gmap-markers>
        </ui-gmap-google-map>

controller

    $scope.center3 = {latitude: 19.20742852680121,
longitude: 73.553466796875
};
$scope.zoom3 = 7;
$scope.models3 = [{
id: 5421222,
latitude: 19.20742852680121,
longitude: 73.553466796875,
options: {
title: "User Location"
}
                                                                                                }];

What might be the issue.? Can someone help me? It displays like this:

Answer 1

I had a similar problem, but in my case, the user input an address and return the location. I found on the Internet the solution, and with some adjustments, I decided this way...

First, I create myController in app.js

app.controller('myController'), function ($scope) { 
  // my variable that's control my modal
  $scope.showModal = false;
  // my click event, like your 'Edit' button
  $scope.createModal = function () {
    $scope.showModal = true;
  };
}

HTML index.html

<my-modal visible="showModal"></my-modal>

HTML modal.html

<div class="form-group">
  <input type="text" class="form-control" ng-model="chosenPlace" details="chosenPlaceDetails" googleplace placeholder="Address"/>
  <div class="map_container">
    <div id="map_canvas" class="map_canvas"></div>
  </div>                                                    
</div>

Then, in my modal.js, I created two Directive's

// Directive of Google Maps
angular.module('modal', [])
  .directive('googleplace', function () {
    return {
      require: 'ngModel',
      scope: {
        ngModel: '=',
        details: '=?'
      },
      controller: function ($scope) {
        $scope.gPlace;
        $scope.map;
        $scope.marker;

        $scope.initMap = function () {
          // Set the initial lat and lng 
          var latlng = new google.maps.LatLng(-20.00, -47.00);
          var options = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          $scope.map = new google.maps.Map($("#map_canvas")[0], options);

          $scope.marker = new google.maps.Marker({
            map: $scope.map,
            draggable: true,
          });

          $scope.marker.setPosition(latlng);
        };

        $scope.initMap();
      },
      link: function(scope, element, attrs, model) {
        var options = {
          types: ['geocode'],
          componentRestrictions: { country: 'us' }
        };                        

        scope.gPlace = new google.maps.places.Autocomplete(element[0], options);       

        google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
          scope.$apply(function() { 
            google.maps.event.trigger(scope.map, 'resize');                         
            var location = new google.maps.LatLng(scope.gPlace.getPlace().geometry.location.A, scope.gPlace.getPlace().geometry.location.F);
            scope.marker.setPosition(location);
            scope.map.setCenter(location);
            scope.map.setZoom(16);                                       
          });
       });
      }
    };
  });

  .directive('myModal', function () {
    return {
      templateUrl: 'modal.html',
      restrict: 'E',
      replace: true,
      scope: true,
      controller: function ($scope) {
      },
      link: function postLink(scope, element, attrs) {
        scope.$watch(attrs.visible, function(value) {                    
          if(value == true) {
            $(element).modal('show');               
          }            
          else {                            
            $(element).modal('hide');  
          }              
        });

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(event){
          scope.$apply(function(){              
            scope.$parent[attrs.visible] = false;             
          });
        });
      }
    };
  });

When the user write his address, and hit Enter, the listener on the map, find the address and marker on the map. I did like that because it was the best solution I found for my project.

I hope that helps. PS: Sorry my english :/