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.opened.then(function() {

var mapOptions = {
  center: new google.maps.LatLng(34.834442, -82.3686479),
  zoom: 8
};

  new google.maps.Map(document.getElementById("eventMap"), mapOptions);
});

Inside the modal html:

<div class="row clearfix">
  <div class="col-md-5" id="eventMap" style="display: block; height: 150px;"></div>
</div>

I tried this in the regular page HTML and worked fine...

What am I missing? Thank you in advance!

回答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.

回答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>

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

回答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,

function MyController($scope,$cookies,$modal,$window,roomService,$timeout) {

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

$modalInstance.opened.then(function() {
    function initialize() {
        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);
});

*** use the time out to make the div load and then call the map ***

}

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

来源：https://stackoverflow.com/questions/24275977/showing-a-google-map-in-angular-ui-modal