Showing A Google Map In Angular-ui Modal?

Trying to load a simple google map within an angular-ui modal. However no luck. The data get's passed in fine, but nothing works in terms of the map... Please help. $modalInstance.

Solution 1:

You can use angularjs-google-maps; an AngularJS directive for Google maps that is very flexible and powerful and easy to use. I've prepared a working demo for your case:

http://plnkr.co/edit/eEtaGH?p=preview

I hope this helps.

Solution 2:

To remove the grayness, according to https://angular-ui.github.io/angular-google-maps/#!/faq:

If rendering starts before elements are full size, google maps calculates according to the smaller size. This is most commonly the case with a hidden element (eg, ng-show). To fix this, use "ng-if" instead, as this will wait to attach to the DOM until the condition is true, which should be after everything has rendered fully.

I've modified your plunker http://plnkr.co/edit/JetUBY?p=preview to remove the grayness. Controller:

var ModalInstanceCtrl = function ($scope, $modalInstance, lat, lng) {
    $scope.render = true;
    // code here
}

Template:

<map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="8"> </map>

Solution 3:

You need to trigger 'resize' event. Follow these lines:

var map = new google.maps.Map(document.getElementById("eventMap"), mapOptions);

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

Solution 4:

I too ran Into a similar situation, where I am loading a map in an angular modal instance. I too searched many places and did't get the correct simple solution for it. So I gone deeper and found a simple solution for this issue.

The issue is that, the map is trying to get the div from the modal before it gets loaded, and the solution is:

In your controller take a $timeout angular parameter,

functionMyController($scope,$cookies,$modal,$window,roomService,$timeout) {

**** after all your model code is defined ****

$modalInstance.opened.then(function() {
    functioninitialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("eventMap"),
                myOptions);
    }
    $timeout(function() {
       initialize()
     }, 1000);
});

*** usethetimeouttomakethedivloadandthencallthemap ***

}

This time out made the map to load perfectly in the modal. A simple solution.